Jquery selectors

Question

Need a little help with my jquery here

I want all my button with a name starting with "my-" and finishing with "-press" to have a "click" event.

<input type="button" id="my-button-x-press" name="my-button-x-name-press" />

Buttons dynamically added to DOM should have the same event.

Answer 1

http://api.jquery.com/category/selectors/

$('input[type=button][name^=my-][name$=-press]').click(function() {
   // code
})

To assign event to elements dynamically, use on http://api.jquery.com/on/ and supply your selector as the second argument to properly delegate event.

$('#container').on('click', 'input[type=button][name^=my-][name$=-press]', function() {
   // code
})

Assuming you are wrapping your inputs on #container, otherwise replace #container with body, but it's always preferable to select the closest ancestor of the selector

Answer 2

Off the top of my head:

$('input[name^="my-"]input[name$="-press"]').click(function(){
    //Stuff to happen.
});

If they are dynamically added to the dom:

$('input[name^="my-"]input[name$="-press"]').on('click', function(){
    //Stuff to happen.
});

Matpols answer is probably the simplest way to do it actually.

Answer 3

you can do it like this

$('#my-'+dunamic_change_here+'-press').click(function(){
  // your code
});

Answer 4

You can use the attribute equals selector, the attribute starts with selector, and the attribute ends with selector, and the delegate method to catch events for elements that are added later on:

$('body').delegate('input[type=button][name^="my-"][name$="-press"]', 'click', function(){
  ...
});

Answer 5

give them all a class and do:

$('.classname').click(function(){etc.});