jQuery cliquer événement sur Div, sauf Div enfant

Question

jQuery cliquer événement sur Div, sauf Div enfant

j'ai le code HTML suivant:

<div class="server" id="32">
  <a>Server Name</a>
  <div class="delete-server">X</div>
</div>

j'essaie de le faire quand les utilisateurs cliquent sur le server div il affiche une boîte de dialogue d'édition. Le problème, c'est simplement faire:

 $(".server").click(function () {
     //Show edit dialog
 });

ne fonctionne pas, car s'ils cliquent sur le X qui est delete, Cela fait apparaître la boîte de dialogue edit. Comment faire toute la div server avoir l'événement de clic sauf le delete-server div.

19

javascript jquery onclick

demandé sur gdoron 2012-04-15 11:12:37

4 réponses

score 22 · Answer 1

$(".server").on('click', ':not(.delete-server)', function (e) {
     e.stopPropagation()
     // Show edit dialog
});

Voici le violon: http://jsfiddle.net/9bzmz/3/

score 13 · Answer 2

il suffit de vérifier quel est l'élément qui a déclenché l'événement:

$(".server").click(function(e) {
    if (!$(e.target).hasClass('delete-server')) {
        alert('Show dialog!');
    }
});

LIVE DEMO

score 8 · Answer 3

Il existe un autre moyen pour résoudre ce problème:

$(".server").click(function () {
    // show edit dialog
});
$(".delete-server").click(function (event) {
    // show delete dialog for $(this).closest(".server")
    event.stopPropagation();
});

assurez-vous simplement qu'un événement de clic est émis sur .delete-server ne correspond pas à l'élément parent.

score 0 · Answer 4

seulement cela fonctionne pour moi.

js_object est l'objet jQuery pour la méta-mère comme un $('body')

jq_object.on('click', '.js-parent :not(.js-child-1, .js-child-2)', function(event) {
    //your code
});

jq_object.on('click', '.js-child-1', function(event) {
    //your code
});

jq_object.on('click', '.js-child-2', function(event) {
    //your code
});

Avant ton cas:

serveur - js-parent

supprimer-serveur - js-enfant-1

jq_object.on('click', '.server :not(.delete-server)', function(event) {
    //your code
});

jq_object.on('click', '.delete-server', function(event) {
    //your code
});

Las etiquetas más populares

jQuery cliquer événement sur Div, sauf Div enfant

4 réponses