Lie un gestionnaire à un évènement pour les éléments sélectionnés.
Les évènements suportés : click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup.
Les évènements non suportés: blur, focus, mouseenter, mouseleave, change, submit.
Cette fonction est similaire a bind(), mais avec quelques différences :
- live s'applique a tous les éléments repondant au moment de l'appel a la sélection, et a tous ceux qui y répondront par la suite. Par exemple si la fonction cible le click tous les li de la page, live s'appliquera aux li présents. Et si un li est rajouté dans la dom par la suite, alors l'évènement click sur ce nouvel élément sera aussi ciblé. Alors que pour la fonction bind, il faudrait la rééxécuter pour inclure le nouveau li dans la sélection.
- les évènements live ne se propagent pas de la même manière que les évènements traditionnels et ne peuvent être stoppés en utilisant stopPropagation ou stopImmediatePropagation. Par exemple soit deux évènements liés au click, l'un sur "li a" et l'autre sur "li". Un clic sur le lien dans le LI va déclencher les deux évènements. Simplement car l'appel à $("li").bind("click", fn); declenche l'évènement lors d'un click sur un li ou tout élément fils du li.
- Les évènements live ne fonctionnent que lorsqu'ils cible des éléments avec un selecteur. Par exemple, ce code marche: $ ( "li a").live(...) mais ce code ne marche pas: $ ( "a", someElement).live(...) ni celyui la: $ ( "a »).parent ().live(...).
Pour supprimer les évènements live, vous devez utiliser la méthode die().
Version: disponible depuis la version 1.3 de JQuery
Paramétres:
Valeur de retour: objet jQuery
$("p").live("click", function(){
$(this).after("<p>Another paragraph!</p>");
});
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").live("click", function(){
$(this).after("<p>Another paragraph!</p>");
});
});
</script>
<style>
p { background:yellow; font-weight:bold; cursor:pointer;
padding:5px; }
p.over { background: #ccc; }
span { color:red; }
</style>
</head>
<body>
<p>Click moi!</p>
<span></span>
</body>
</html>