it-swarm.com.de

die jQuery-Funktion bindet nicht an neu hinzugefügte dom-Elemente

Hier ist index.html:

<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  <script type="text/javascript">

    $(document).ready(function() {
      $('.btn_test').click(function() { alert('test'); });
    });

    function add(){
      $('body').append('<a href=\'javascript:;\' class=\'btn_test\'>test</a>');
    }

  </script>
</head>
<body>
  <a href="javascript:;" class="btn_test">test1</a>
  <a href="javascript:;" onclick="add()">add</a>
</body>

Wenn ich auf test1 link klicke, wird alert('test') angezeigt. Wenn ich jedoch auf add link klicke und auf test klicke, wird nichts angezeigt.

Könntest du es erklären?

75
Ralsk28

Für Benutzer, die nach 2011 zu dieser Frage kommen, gibt es einen neuen Weg, dies zu tun:

$(document).on('click', '.btn_test', function() { alert('test'); });

Dies ist ab jQuery 1.7.

Weitere Informationen finden Sie unter Direkte und delegierte Ereignisse

207
Moshe Katz

Sie müssen einen Live-Klicklistener verwenden, da anfangs nur ein einzelnes Element vorhanden ist.

$('.btn_test').live("click", function() { 
   alert('test'); 
});

Update: Da live veraltet ist, sollten Sie "on ()" verwenden:

$(".btn_test").on("click", function(){ 
   alert("test");
});

http://api.jquery.com/on/

34
Doug Molineux

Ich habe das gleiche Problem wie die Frage, ich war kurz davor, meine Haare zu ziehen, dann bekam ich die Lösung. Ich verwendete eine andere Syntax

$(".innerImage").on("click", function(){ 
alert("test");
});

es funktionierte nicht für mich (innerImage wird dynamisch erstellt dom) Jetzt verwende ich 

$(document).on('click', '.innerImage', function() { alert('test'); });

http://jsfiddle.net/SDJEp/2/

danke @Moshe Katz

15
UFM

.click bindet sich an das, was derzeit für jQuery sichtbar ist. Sie müssen .live verwenden:

$('.btn_test').live('click', function() { alert('test'); });
8
doctorless

Verwenden Sie stattdessen Jquery live. Hier ist die Hilfeseite dafür http://api.jquery.com/live/

$('.btn_test').live(function() { alert('test'); });

Bearbeiten: live() ist veraltet und Sie sollten stattdessen on() verwenden. 

$(".btn_test").on("click", function(){ 
   alert("test");
});
7
Amir Raminfar

Dies liegt daran, dass das Ereignis click zum Zeitpunkt der Bindung nur an das vorhandene Element gebunden ist. Sie müssen live oder delegieren, um das Ereignis an vorhandene und zukünftige Elemente auf der Seite zu binden.

$('.btn_test').live("click", function() { alert('test'); });

Jquery Live

3
scrappedcola

sie brauchen live listenener statt klicken:

$('.btn_test').live('click', function() { 
   alert('test'); 
});

Der Grund dafür ist, dass die Variable click den Listener nur Elementen zuordnet, wenn die Seite geladen wird. Bei neuen Elementen wird dieser Listener nicht angezeigt. Live fügt den Click-Listener dem Element hinzu, wenn die Seite geladen wird und wenn sie danach hinzugefügt werden

2
locrizak

Wenn das Dokument geladen wird, fügen Sie jeder übereinstimmenden Klasse Ereignis-Listener hinzu, um das Klickereignis für diese Elemente zu überwachen. Derselbe Listener wird nicht automatisch zu Elementen hinzugefügt, die Sie später zum Dom hinzufügen.

1
shanethehat

Denn das Ereignis ist an jedes übereinstimmende Element im Dokument bereit gebunden. Alle neuen Elemente sind NICHT automatisch mit den gleichen Ereignissen verbunden.

Sie müssen das Ereignis manuell an jedes neue Element binden, nachdem es hinzugefügt wurde, oder den Live-Listener verwenden.

1
Neil N
$('.btn_test').click

fügt den Handler für Elemente hinzu, die auf der Seite verfügbar sind (an diesem Punkt ist 'test' nicht vorhanden!)

sie müssen entweder manuell einen Click-Handler für dieses Element hinzufügen, oder Sie verwenden einen live-Event-Handler, der für jedes Element funktioniert, auch wenn Sie es später erstellen.

$('.btn_test').live(function() { alert('test'); });
1
Karoly Horvath

Nach jquery 1.7 kann die Methode verwendet werden und es funktioniert wirklich Nizza 

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
    </script>
<script>
    $(document).ready(function(){
      $("p").on("click",function(){
       alert("The paragraph was clicked.");
       $("body").append("<p id='new'>Now click on this paragraph</p>");
    });
    $(document).on("click","#new",function(){
       alert("On really works.");
      });
    });
</script>
</head>
<body>
    <p>Click this paragraph.</p>
</body>
</html>

sieh es in Aktion http://jsfiddle.net/rahulchaturvedie/CzR6n/

1
Rahul

Sie müssen eine geeignete Schaltfläche zum Klicken auf die Schaltfläche hinzufügen, um ein korrektes Ergebnis zu erhalten

$("#btn1").live(function() { alert("test"); });
0
Salman Ashraf

Oder führen Sie einfach das Skript am Ende Ihrer Seite aus

0
Enigmax