CODEWITHSUNDEEP
jquery
Jacob
Jacob

Reputation: 91

Difference between jquery bind

Friends, are there any differences between the following snippet codes?

  $('.has-child > a').on("click", function() {
                $(this).parent().find("ul").slideToggle('fast');
                var classname = $(this).find("i").attr('class');
                $(this).find("i").toggleClass("fa fa-minus-square").toggleClass("fa fa-plus-square");
            });

and

 $('.nav-tree').on('click', '.has-child > a', function() {
                $(this).parent().find("ul").slideToggle('fast');
                var classname = $(this).find("i").attr('class');
                $(this).find("i").toggleClass("fa fa-minus-square").toggleClass("fa fa-plus-square");
            });

what's the differences? Appreciate if you could help me out. thanks.

$('.has-child > a').on("click", function()

and

$('.nav-tree').on('click', '.has-child > a', function()

Upvotes: 1

Views: 33

Answers (1)

nyumerics
nyumerics

Reputation: 6547

The first selector tells you that in the complete DOM, find all the direct children of class has-child which are of type a and bind the click handler on them.

The second selector tells you the the same as above. But instead of searching the complete DOM, it only searches inside the DOM elements marked with nav-tree class.

Also, binding such a handler to the parent allows events to be attached to elements which are still not mounted in the DOM.

Upvotes: 1

Related Questions