Click-Funktion arbeitet, wenn verschiedene divs klicken

Question

Ich habe ein div appendDiv genannt und wenn ich es klicken, wird ein div mit Klassennamen textGroup angehängt wird.

$("#appendDiv").on("click", function(e) { 

    $('#appendDiv').append("<label class='textGroup' style='width:50px;height:50px;background-color:gray;z-index:4;position:absolute;top:" + e.pageY + "px;left:" + e.pageX + "px;'></label>") 

}); 

ich eine Klick-Funktion für textGroup div haben (das heißt), wenn sie klicken, wird kommen, eine Warnung. Aber wenn ich auf das textGroup div klicke, kommt der Alarm und ein div wird angehängt. Dies ist die Funktion

$("#appendDiv").on("click", function(e) { 
    $('#appendDiv').append("<label class='textGroup' style='width:50px;height:50px;background-color:gray;z-index:4;position:absolute;top:" + e.pageY + "px;left:" + e.pageX + "px;'></label>") 

    $(".textGroup").bind("click", function() { 
     alert("appended"); 
    }); 
}); 

Ich weiß textGroup das Kind von appendDiv ist. Aber meine Frage ist

1. ich Sie auf das textGroup div, aber warum die Klick-Funktion von appendDiv ausgeführt wird?

2. Wie die Klick-Funktion von appendDiv nur beschränken, wenn auf den appendDiv und nicht auf die textGroup klicken, klicken?

Dies sind die jsFiddle link

Answer 1

Sie haben 2 Problem in Ihrem Code

1) Mehrfache Ereignisbindung für Elemente.

2) Ereignispropagierung auf dem Kind Klick Element

den Click-Handler ändern Ereignis befestigen zusammen mit Einstellung des Ereignispropagierung von Elternelement beigefügtes Element zum letzten:

$("#appendDiv .textGroup:last").click(function(e) { 
    e.stopPropagation(); 
    alert("hi") 
}); 

Working Demo

Answer 2

Sie können diese 2 Änderungen tun:

$("#appendDiv").on("click", function(e) { 

$('#appendDiv').append("<label class='textGroup' style='width:50px;height:50px;background-color:gray;z-index:4;position:absolute;top:" + e.pageY + "px;left:" + e.pageX + "px;'></label>") 

    // remove .textGroup click event from here 
}); 

werden für den Text neues Ereignis erstellen

$(document).on("click",".textGroup", function() { 
     alert("appended"); 
}); 

Answer 3

Ereignisse sprudeln normalerweise den DOM-Baum auf (das Etikett ist innerhalb von #appenDiv, also ein "Elternteil" und erhält auch das Klickereignis). Um ihn zu stoppen verwenden:

$(".textGroup").on("click", function(event){ 
    event.stopPropagation(); 
    alert("hi"); 
}); 

Answer 4

Try this:

bessere Art und Weise durch die Verwendung on() mit Chaining wie

$("#appendDiv").on('click',function(e){ 
     $('#appendDiv').append("<label class='textGroup' style='width:50px;height:50px;background-color:gray;z-index:4;position:absolute;top:" + e.pageY + "px;left:" + e.pageX + "px;'></label>") 
}).on('click','.textGroup',function(e) { 
     e.stopPropagation(); 
     alert("appended"); 
}); 

Answer 5

Dieses Szenario ist aufgrund Ereignis so Elternteil Ereignis sprudelt auslöst vor Kind und dann Kind Ereignis löst aus. Sie können event.stopPropagation() mit untergeordneten Ereignis verwenden. wird dein Problem lösen.