Jquery-click-Ereignis nicht auslösen, die auf das element erstellt, die dynamisch mit jquery

Ich versuche, eine einfache Funktionalität, wo der Benutzer wählt einen Wert aus dem Dropdown-Menü und klickt dann auf die Schaltfläche hinzufügen, um das ausgewählte Element die in der nachstehenden div in der form tag.

Jeder Hinzugefügt tag einen entfernen Anker, die beim anklicken entfernt die tag.

Nun durch anklicken der Schaltfläche hinzufügen die tags sind korrekt eingesetzt
Aber wenn ich klickte auf die Schaltfläche entfernen, über tag wird das click-Ereignis nicht auslösen.

Aber wenn ich hart codiert einige tags mit der exakt gleichen markup wie die dynamisch generierten tags, die das click-Ereignis für die entfernen-tag wird brennen genau richtig und das tag entfernt wird, wie ich es wollte.

HTML:

    <select id="ddlTagName">
    <option value="1">Tag One</option>
    <option value="2">Tag Two</option>
    <option value="3">Tag Three</option>
</select>
<input id="btnInsertTag" type="button" value="Add"/>
<br/>

<div id="TagsHolder">
  <span class="tag">
      <span>Tag One HardCoded </span>
      <a class="remove">X</a>
  </span>

  <span class="tag">
      <span>Tag Two HardCoded </span>
      <a class="remove">X</a>
  </span>
</div>

JS:

    $("#btnInsertTag").click(function () {
    var selectedTagText = $("#ddlTagName option:selected").text();
    var selectedTagValue = $('#ddlTagName').val();
    var generateMarkup = '<span class="tag" data-value="' + selectedTagValue + '"><span>' + selectedTagText + ' </span><a class="remove">X</a></span>';
    $("#TagsHolder").append(generateMarkup);
});

$(".remove").click(function () {
    alert('click event triggered');
    $(this).parent(".tag").remove();
});

Meine Frage ist, warum die click-Ereignis nicht feuern für die dynamisch generiert tags.

Hier ist die Demo

Vielen Dank im Voraus

Goggled Ihre Frage Titel und bekam dies als erstes Ergebnis : stackoverflow.com/questions/20819501/...

InformationsquelleAutor Saurabh Palatkar | 2014-03-24

  1. 29

    Verwenden auch delegation statt

    Event delegation ermöglicht uns das anfügen eines einzigen Ereignis-listener, um ein
    das parent-element, das Feuer, die für alle Kinder passend zu einem Selektor,
    ob diejenigen Kinder, die jetzt bestehen oder in Zukunft Hinzugefügt.

    Mehr info

    $(document).on('click', '.remove', function () {.....

    InformationsquelleAutor

  2. 3
    $("#btnInsertTag").on('click',  function () {
  var selectedTagText = $("#ddlTagName option:selected").text();
  var selectedTagValue = $('#ddlTagName').val();
  var generateMarkup = '<span class="tag" data-value="' + selectedTagValue + '"><span>' +   selectedTagText + ' </span><a class="remove">X</a></span>';
  $("#TagsHolder").append(generateMarkup);
});
$(document).on('click', ".remove", function () {
       alert('click event triggered');
   $(this).parent(".tag").remove();
});

    Veranstaltung verbindlich, nicht für die dynamisch generierten Elemente. Für diese müssen Sie zu binden, um ein element, das die im moment vorhanden ist, dass das JS ausgeführt wird (das ist das Dokument), und geben Sie einen Selektor in der zweiten parameter .auf(). Wenn ein Klick erfolgt auf Dokument-element jQuery prüft, ob es angewendet wird, zu einem Kind, das element, das entspricht dem ".entfernen Sie" Selektor.

    InformationsquelleAutor

  3. 0

    jQuery .klicken funktioniert nicht mit dynamisch erstellten html-Elemente zu binden, müssen event. Hier ist der code dazu. 

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

 var selectedTagText = $("#ddlTagName option:selected").text();
 var selectedTagValue = $('#ddlTagName').val();
 var generateMarkup = '<span class="tag" data-value="' + selectedTagValue + '"><span>' + selectedTagText + ' </span><a class="remove">X</a></span>';
 $("#TagsHolder").append(generateMarkup);

});

    InformationsquelleAutor

Schreibe einen Kommentar