Reputation: 91
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
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