Question

I am trying to use selectors with trigger and bind in jQuery. Its a simple code and i can’t seem to get it working :(.

Here is what i am doing.

$(document).ready(function (){

var ctrlChanged = jQuery.Event("CtrlChanged");

  //********** Any time a button with id*=btnAddNewEmailAddress is clicked, raise event that parent control has changed.
$('[id *= "btnAddNew"]').click(function () {
  $('[id *= "btnAddNew"]').trigger(ctrlChanged);
});
});

To subscribe to above event i am using following code.

$('[id *= "btnAddNew"]').bind('CtrlChanged', function(){alert('Control Changed')})   

This combination is not working. When i click buttons with id matching “btnAddNew”, i don’t see alert message.

But if i replace [id *= “btnAddNew”] with something like

$('body').trigger('ctrlChanged')

then corresponding change in bind

$('body').bind('ctrlChanged', function(){alert('Control is changed'})

works like charm.

I am wondering if, trigger and bind works with selectors. I would think so… but they are not..

If yes then what am i doing wrong?

Answer 1

I would change this:

$('[id *= "btnAddNew"]').click(function () {
  $('[id *= "btnAddNew"]').trigger(ctrlChanged);
});

to

$('[id *= "btnAddNew"]').click(function () {
  $(this).trigger(ctrlChanged);
});

You might also have to move the ctrlChanged event object to global scope; i.e. move it outside of the $(document).ready(), right before it would be good.