jQuery erhalten Datenattribut auf Klick funktioniert nicht

Ich habe ein Skript, das an zwei Orte in meiner Webanwendung anhängen wird. Einer ist ein Listenelement und der andere ist ein verstecktes Feld in einem HTML-Formular (das ich die Daten in einer PHP-Dienstdatei verarbeiten).jQuery erhalten Datenattribut auf Klick funktioniert nicht

Ich möchte jedoch, dass wenn ein Benutzer auf das "x" -Symbol klickt, dass alle Elemente entfernt werden, die dieselbe ID haben.

Ich habe eine gute Idee, wie dies zu tun ist, aber mein Skript unten protokolliert nicht einmal die ID. Der .control Block gibt mir das Problem. Der Codeblock #add hängt den HTML-Code erfolgreich an.

Fehle ich etwas offensichtlich? Versuchen

$("#add").click(function() { 

    // RENDER LIST 
    var playerList = ""; // 
    playerList += "<li class='selection'>" + $("#player").val() + "<i class='fa fa-close control' data-id='" + $("#playerGUID").val() + "'> </i>" + "</li>"; 

    $(playerList).appendTo("#playerList"); 

    // ADD GUID TO SUBMISSION VALUES 
    var playerHTML = ""; 
    playerHTML += "<input data-id='" + $("#playerGUID").val() + "' type='hidden' name='playerGUID[]' value='" + $("#playerGUID").val() + "' />"; 

    $(playerHTML).appendTo("#selected-players"); 

    // CLEAR INPUT FIELD 
    $("#player").val(''); 
}); 

$(".control").click(function() { 
    $targetID = $(this).attr('data-id'); 
    console.log("Selected ID:" + $targetID); 

    // REMOVE WILL COME HERE 
});

Quelle

2016-05-16 WebDevDanno

_alle Elemente werden entfernt, die dieselbe ID haben __ ?? "ID" muss pro Seite eindeutig sein ... –

Wenn Sie absichtlich schlechten Code verwenden, können Sie nicht erwarten, dass er richtig funktioniert. Wie Sie [hier] (https://jsfiddle.net/sd6Lbydc/) sehen können, nimmt jQuery bei mehreren Elementen mit derselben ID nur die erste. –

Könnten Sie bitte etwas von Ihrem HTML-Code posten? –

$(".control") nicht zu der Zeit existiert Sie das Click-Ereignis binden. Sie müssen das Ereignis delegieren, wie so:

$(document).on("click", ".control", function() { 
    $targetID = $(this).attr('data-id'); 
    console.log("Selected ID:" + $targetID); 
    // REMOVE WILL COME HERE 
});

Was hier passiert, ist, dass jQuery ein Listener auf dem Dokument bindet (die immer vorhanden ist) anstelle der .control die existieren nicht, bis Sie es durch einen Klick erstellen zum #add. Auf diese Weise können Ereignisse auf Elementen mit der Klasse control abgefangen werden, selbst wenn die Elemente später hinzugefügt wurden.

Überprüfen Sie jQuery.on unter Direkte und delegierte Ereignisse für weitere Details.

Hinweis: Statt $(document) verwenden Sie das Ereignis auf ein beliebiges Element binden kann, die ein Elternteil von .control sein wird und verfügbar ist, wenn Sie das Ereignis binden (z body). Im Idealfall möchten Sie es an das nächste Elternelement binden, das beim Laden des Dokuments vorhanden ist.

Quelle

2016-05-16 14:15:36 apokryfos

Ahh das ist perfekt! Danke für die Erklärung. Es macht durchaus Sinn. =] wird sooo gut genug! Ich denke, ich möchte alle meine '.click()' -Funktionen einheitlich aussehen lassen, also habe ich das nicht berücksichtigt. – WebDevDanno

Ihre Beschreibung, wie delegierte Ereignisbindungen funktionieren, ist korrekt. Ich würde jedoch empfehlen, nicht immer auf "Dokument" als obersten Listener zurückzugreifen - es gibt weniger Overhead bei der Verwendung des ersten übergeordneten Elements des Zielsteuerelements, das immer existiert 'div' oder etwas in der Art. –

@ Cᴏʀʏ danke für den Kommentar, ich habe es als Notiz hinzugefügt. Der einzige Grund, warum ich das Dokument benutzt habe, war, dass ich die Struktur der Seite hier nicht kannte. – apokryfos

-1

.on binden Ereignis statt .click

$(".control").on("click",function() { 
    $targetID = $(this).attr('data-id'); 
    console.log("Selected ID:" + $targetID); 

    // REMOVE WILL COME HERE 
});

Quelle

2016-05-16 14:12:23

Die click() Bindung, die Sie verwenden, wird eine direkte Bindung genannt, die den Handler nur an Elemente anfügt, die bereits vorhanden sind. Es wird nicht an später erstellte Elemente gebunden. Um dies zu tun, müssen Sie eine "delegierte" Bindung erstellen, indem Sie die Methode on() verwenden.

Eg.

<html> 
    <head> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 

    </head> 
    <body> 

     <div id="playerList">playerList</div> 

     <div id="selected-players">selected-players</div> 

     <a href="#" id="add">Add</a> 

    <script> 

     $(document).ready(function(){ 

      $("#add").click(function() { 

      // RENDER LIST 
      var playerList = ""; // 
      playerList += "<li class='selection'>Dynamic LI " + $("#player").val() + "<i class='fa fa-close control' data-id='sample-data-id " + $("#playerGUID").val() + "'> <b>iVal-Click Here</b> </i>" + "</li>"; 

      $(playerList).appendTo("#playerList"); 

      // ADD GUID TO SUBMISSION VALUES 
      var playerHTML = ""; 
      playerHTML += "<input data-id='" + $("#playerGUID").val() + "' type='hidden' name='playerGUID[]' value='" + $("#playerGUID").val() + "' />"; 

      $(playerHTML).appendTo("#selected-players"); 

      // CLEAR INPUT FIELD 
      $("#player").val(''); 
     }); 

     $("#playerList").on("click", ".control", function() { 
      $targetID = $(this).attr('data-id'); 
      console.log("Selected ID:" + $targetID); 

      // REMOVE WILL COME HERE 
     }); 

     }); 

    </script> 

    </body> 
    </html>

Quelle

2016-05-16 14:32:08

jQuery erhalten Datenattribut auf Klick funktioniert nicht

Antwort

Verwandte Themen