这两个 jQuery 代码片段有什么区别？

Question

I'm rather new to jQuery and I came across something. What is the difference between these code snippets? I think they'll do exactly the same thing.

 $("p.expendable").on('mouseover', function(){ $(this).remove(); }); $('p').on('mouseover', function() { $('p.expendable').remove(); });

Answer 1

They are different.

Considering the first case , if the current hovered p element have expendable class then it will remove that specific element.

 $("p.expendable").on('mouseover', function() { $(this).remove(); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p class="expendable"> Testing</p> <p> Testing 2</p> <p> Testing 3</p>

In second case the currently hovered element is any p tag irrespective of whether it have any class or not, then it will remove all p element which have 'expendable' class

 $('p').on('mouseover', function() { $('p.expendable').remove(); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p class="expendable"> Testing</p> <p> Testing 2</p> <p> Testing 3</p>

Answer 2

delegate is cleaner:

$(document).delegate("p.expendable", 'mouseover', function(){
   $(this).remove();
});

It says, if p.expendable is created, attach function to it that deletes itself. (deprecated!) Good catch on this one @ epascarello

Use:

$(document).on("p.expendable", 'mouseover', function(){
       $(this).remove();
    });

or just:

$("p.expendable").on('mouseover', function(){
           $(this).remove();
        });