jQuery wildcard selector on attributes -

i have stuff

<table>   <tr>     <td>       foo     </td>     <td>       <a href="#" data-action:edit="1">[edit]</a>       <a href="#" data-action:delete="1">[del]</a>     </td>   </tr>   <tr>     <td>       bar     </td>     <td>       <a href="#" data-action:edit="2">[edit]</a>       <a href="#" data-action:delete="2">[del]</a>     </td>   </tr>   <tr>     <td>       foobar     </td>     <td>       <a href="#" data-action:edit="3">[edit]</a>       <a href="#" data-action:delete="3">[del]</a>     </td>   </tr> </table> 

and able individual attributes selectors:

$('[data-action\\:edit]') or $('[data-action\\:delete]')

how can data-action:* elements?

here alternative solution using knockoutjs instead of jquery doing sort of thing (binding actions elements).

instead of storing data in dom we'll storing in javascript objects.

i know not looking for, think provides cleaner solution underlying problem.

html:

<table>     <tbody data-bind="foreach: elements">         <tr>             <td data-bind="text: name"></td>             <td>                  <a href="#" data-bind="click: $root.edit">[edit]</a>                 <a href="#" data-bind="click: $root.del">[del]</a>             </td>         </tr>     </tbody> </table> 

javascript:

function telement(name){     this.name = name; }  function viewmodel(arr){     var self=this;     this.elements = ko.observablearray(arr);     this.del = function(elem){         self.elements.remove(elem);     }     this.edit = function(elem){         alert("edit called on element name "+elem.name);         } }  var vm = new viewmodel([new telement("foo"),new telement("bar"),new telement("foobar")]);  ko.applybindings(vm); 

working jsfiddle