CODEWITHSUNDEEP
javascriptjquerydom
user3273621
user3273621

Reputation: 85

JQuery : Finding the select elements inside the table row and listening to change event

I have a table of rows which contains multiple select elements. I have given class to this select elements. I need to find the on change event of this select elements based on the class.

So i am using this to find the element

jQuery("table").on('click', 'tr', function () {
        jQuery(this).children().find('.select1').on('change', function () {
              //my action
        });
        //and same way the next select element
});

now with this im getting the on change event but the on change event is fired multiple time. Initially once and then the count keeps on increasing. I need help with this coz i have been stuck for a very long time. Thanks

Answer:

I wanted to listen the change event of the select and on that add more element to the row. So now i am using delegate() to listen to the select change event and then getting the parent using jQuery(this).closest('tr'); to append other table data.

jQuery('table').on('click','select1',function(){
    //get the parent
    jQuery(this).closest('tr');
    //Do the rest
});

Thanks

Upvotes: 1

Views: 968

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

There is no need for the tr click event, if the select elements are static then register the click handler directly

jQuery('table .select1').on('change', function () {
    //my action
});

if they are created dynamically then use event delegation

jQuery('table').on('change', '.select1', function () {
    //my action
});

In your code every time you click on a tr a new change handler will get added to the select1 element in that tr that is not what you wants, is it?

Upvotes: 1

Related Questions