jQuery Cliquez sur Stop Propagation

Question

J'ai une configuration simple, une table dont les cellules ont des cases à cocher. J'ai deux événements, un qui répond à cliquer sur les cases à cocher et un autre qui répond à cliquer sur les éléments "tr". Lorsque je clique sur une case à cocher, je ne veux pas déclencher l'événement de ligne de la table. J'ai essayé event.stopPropagation() et return false; sans aucune chance. Voici un extrait:

$("tr").click(function() { 
    alert("tr clicked"); 
}); 

$("input[type=checkbox]").change(function(event) { 
    event.stopPropagation(); 
    alert("checkbox clicked"); 
}); 

Avec quelque chose comme:

<tr> 
    <td><input type="checkbox" id="something" name="something" /></td> 
</tr> 

Si l'événement change déclenche l'événement clic également le feu. Des indices sur la façon d'empêcher l'événement de clic tr de se déclencher si la case à cocher est modifiée dans l'élément td du tr?

Answer 1

Je recommande ceci:

$('#theTable').delegate('tr', 'click', function (e) { 
    if ($(e.target).is('input:checkbox')) { 
     alert('checkbox clicked'); 
    } else { 
     alert('tr clicked'); 
    }   
}); 

Donc, vous avez un seul gestionnaire de clic pour la table entière. Btw, vous n'avez pas besoin de placer tout le code à l'intérieur de cet unique gestionnaire. Vous pouvez avoir des fonctions distinctes pour chaque action (case à cocher cliqué sur la ligne VS cliqué), puis ...

$('#theTable').delegate('tr', 'click', function (e) { 
    if ($(e.target).is('input:checkbox')) { 
     checkboxClicked(e); 
    } else { 
     rowClicked(e); 
    }   
}); 

function checkboxClicked (e) { 
    // process event 
} 

function rowClicked (e) { 
    // process event 
} 

Answer 2

Le problème est que .change et .click sont différents événements de tir à différents moments au cours d'une action sur une case à cocher, si le gestionnaire pour l'un ne peut pas affecter l'autre. Vous pouvez ajouter un contrôle dans votre gestionnaire de clic:

$("tr").click(function(event) { 
    if (event.target.type == 'checkbox') return; 
    alert("tr clicked"); 
}); 

$(":checkbox").change(function(event) { 
    alert("checkbox clicked"); 
}); 

Ou utiliser l'événement .click pour les gestionnaires:

$("tr").click(function(event) { 
    alert("tr clicked"); 
}); 

$(":checkbox").click(function(event) { 
    event.stopPropagation(); 
    alert("checkbox clicked"); 
}); 

Answer 3

Utilisation click au lieu de change. Semble travailler ici http://jsfiddle.net/usmanhalalit/mGVv7/1/

$("input[type=checkbox]").click(function(event) { 
    event.stopPropagation(); 
    alert("checkbox clicked"); 
}); 

Answer 4

Vous devez attraper l'événement .click() sur la case à cocher, pas l'événement .change().

Au moment où .change() est déclenché, l'événement click a déjà été traité et a fait barboter le DOM vers les éléments parents.