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");
});
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.
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',
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');
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.
contentchangedan event or a function? It looks like an event, but you call it a function in your question.