How to subscribe a method to fire onchange and on a custom event?

Question

I have a method setup to fire onChange with the following code:

var product = $('#selProduct:visible');
var note=$('#bbdata');

product.selectProduct({
    target: note,
    url: 'product.php',
    data: { ajax: true }
}).trigger('change'); // TO DO: to fire also on visibility change

Then I have a method where I make a div visible.

function show_product() {
    hide_group2();
    $("#product_zone2").show('fast', function(){
    $("selProduct").trigger('isVisibleProduct');// custom trigger event
    });
}

I want to change the method definition to fire also when I raise the custom event. How do I do that?

Answer 1

Hi,

Just use jQuery bind to link your desired function to any type of event (event custom).

myObject.bind('myEventName', function(){/*..*/});

or

myObject.bind('myEventName', myFunctionName);

then trigger with

myObject.trigger('myEventName');

---

If your case you could put

product.bind('isVisibleProduct', function(){
  this.selectProduct({
      target: note,
      url: 'product.php',
      data: { ajax: true }
  }).trigger('change'); // TO DO: to fire also on visibility change
});

Answer 2

With this code

product.selectProduct({
    target: note,
    url: 'product.php',
    data: { ajax: true }
}).trigger('change');

are not binding selectProduct() to be fired on a change event. You just execute selectProduct() and then fire change on product. Maybe selectProduct() binds something to the change event. But without knowing what it does, it is hard to tell.

If you want to execute selectProduct() on the change event and your custom event, you have to bind an event handler to both events, like so:

product.bind('change isVisibleProduct', function() {
    $(this).productSelect({/* ...parameters here ... */});
});

Please clarify your question if this is not what you mean.