Quelle est la différence entre ces deux extraits de code jQuery?

Question

Je suis plutôt nouveau à jQuery et je suis tombé sur quelque chose. Quelle est la différence entre ces extraits de code? Je pense qu'ils feront exactement la même chose.

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

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

Answer 1

délégué est plus propre

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

Il dit, si p.expendable est créé, la fonction attache à ce qui se supprime. (Désapprouvée!) Bonne prise sur celui-ci @epascarello

S'il vous plaît utiliser

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

ou tout simplement

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

Bonne programmation!

Answer 2

Ils sont différents. Considérant le premier cas, si l'élément p actuellement plané a la classe expendable, il supprimera cet élément spécifique.

$("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>

En second cas, l'élément actuellement plané est une balise p indépendamment du fait qu'il a une classe ou non, il va supprimer tous les éléments p qui ont la classe « fongibles »

$('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>