CODEWITHSUNDEEP
javascriptjquery
Sam
Sam

Reputation: 5270

jQuery two different ids trigger the same function

There are 2 ids #firstTableTotal, #secondTableTotal and 1 function contentchanged. How to make both ids(#firstTableTotal, #secondTableTotal) use the same function(contentchanged). I tried with the following codes but the result is not as expected.

$('#firstTableTotal').trigger('contentchanged');
$('#secondTableTotal').trigger('contentchanged');

$(document).on('contentchanged', '#firstTableTotal #secondTableTotal', function() 
{alert("Calculations go here");
});

Upvotes: 0

Views: 550

Answers (4)

Rajshekar Reddy
Rajshekar Reddy

Reputation: 19007

As mentioned already you are trigerring the event even before binding it... Also another problem is with your selectors... There must be a comma between each ID.. Else the meaning would be a parent child combination.

It should be

'#firstTableTotal, #secondTableTotal'

Right now what you have actually means select the element with ID secondTableTotal which is the child of a element with ID firstTableTotal.. Which is not the case in your code.

Your aim is to target both the elements. So place a comma between them. This makes the selector choose two different elements.

Upvotes: 2

J. Titus
J. Titus

Reputation: 9700

If contentchanged is an event:

var myFunc = function(){
  alert("Calculations go here");
};

$('#firstTableTotal').on('contentchanged', myFunc);
$('#secondTableTotal').on('contentchanged', myFunc);

//Some time later
$('#firstTableTotal').trigger('contentchanged');
$('#secondTableTotal').trigger('contentchanged');

If contentchanged is in fact a function:

var contentchanged = function(){
  alert("Calculations go here");
};

$('#firstTableTotal').on('some_event', contentchanged);
$('#secondTableTotal').on('some_event', contentchanged);

//Some time later
$('#firstTableTotal').trigger('some_event');
$('#secondTableTotal').trigger('some_event');

Upvotes: 0

TheNastyOne
TheNastyOne

Reputation: 1065

if you have a function called contentChanged: var contentchanged= function () { //do something} then you can simply add a listener to each DOM node. $('#firstTableTotal').on(eventNameHere, contentchanged); $('#secondTableTotal').on(eventNameHere, contentchanged);

It is best to attach the listeners to the node directly, that way when the nodes are removed from the DOM, the listeners will also be garbage collected. If you add the listener to the window, like you are currently doing, you will need to manually remove it in order for garbage collection to occur.

Upvotes: -1

Sushanth --
Sushanth --

Reputation: 55750

That is because you are triggering the event even before it is bound.

Also use a comma to separate the 2 different selectors

$(document).on('contentchanged', '#firstTableTotal, #secondTableTotal',

Upvotes: 0

Related Questions