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 den test1Link klicke, wird angezeigt alert('test'), aber wenn ich auf den addLink klicke und dann auf klicke test, wird nichts angezeigt.
Könnten Sie es erklären?
javascript
jquery
onclick
Ralsk28
quelle
quelle
Antworten:
Für Benutzer, die nach 2011 zu dieser Frage kommen, gibt es einen neuen geeigneten 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
quelle
Sie müssen einen "Live" -Klick-Listener verwenden, da anfangs nur das einzelne 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/
quelle
liveist ein dynamischer Handler mit später Bindung, der an Elemente angehängt werden kann, die dem DOM hinzugefügt wurden, nachdem der Handler deklariert wurde. Weitere Informationen finden Sie in dieser Dokumentation ..click()Gilt nur für Objekte, die beim Laden der Seite vorhanden sind, gilt jedoch.live()für alle Objekte, die jetzt vorhanden sind oder in Zukunft erstellt werden.Ich habe das gleiche Problem wie die Frage, dass ich kurz davor war, an meinen Haaren zu ziehen, dann habe ich die Lösung gefunden. Ich habe eine andere Syntax verwendet
$(".innerImage").on("click", function(){ alert("test"); });es hat bei mir nicht funktioniert (innerImage wird dynamisch dom erstellt) Jetzt benutze ich
$(document).on('click', '.innerImage', function() { alert('test'); });http://jsfiddle.net/SDJEp/2/
danke @Moshe Katz
quelle
.click bindet an das, was derzeit für jQuery sichtbar ist. Sie müssen .live verwenden:
$('.btn_test').live('click', function() { alert('test'); });quelle
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 sollteon()stattdessen verwendet werden.$(".btn_test").on("click", function(){ alert("test"); });quelle
Dies liegt daran, dass das Klickereignis zum Zeitpunkt der Bindung nur an das vorhandene Element gebunden ist. Sie müssen Live oder Delegate verwenden, um das Ereignis an vorhandene und zukünftige Elemente auf der Seite zu binden.
$('.btn_test').live("click", function() { alert('test'); });Jquery Live
quelle
Sie benötigen einen Live-Listener anstelle eines Klicks:
$('.btn_test').live('click', function() { alert('test'); });Der Grund dafür ist, dass der
clickListener dem Listener nur Elemente zuweist, wenn die Seite geladen wird. Alle neu hinzugefügten Elemente enthalten diesen Listener nicht. Live fügt den Klick-Listener dem Element hinzu, wenn die Seite geladen wird und wenn sie anschließend hinzugefügt werdenquelle
Wenn das Dokument geladen wird, fügen Sie jeder übereinstimmenden Klasse Ereignis-Listener hinzu, um auf das Klickereignis für diese Elemente zu warten. Der gleiche Listener wird nicht automatisch zu Elementen hinzugefügt, die Sie später zum Dom hinzufügen.
quelle
Weil das Ereignis an jedes übereinstimmende Element im Dokument gebunden gebunden ist. Alle neu hinzugefügten Elemente sind NICHT automatisch mit denselben Ereignissen verknüpft.
Sie müssen das Ereignis nach dem Hinzufügen manuell an ein neues Element binden oder den Live-Listener verwenden.
quelle
$('.btn_test').clickfügt den Handler für Elemente hinzu, die auf der Seite verfügbar sind (zu diesem Zeitpunkt existiert 'test' nicht!)
Sie müssen entweder manuell einen Klick-Handler für dieses Element hinzufügen, wenn Sie anhängen, oder einen
liveEreignishandler verwenden, der für jedes Element funktioniert, auch wenn Sie es später erstellen.$('.btn_test').live(function() { alert('test'); });quelle
Nach jquery 1.7 kann die Methode verwendet werden und es funktioniert wirklich gut
<!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>sehen Sie es in Aktion http://jsfiddle.net/rahulchaturvedie/CzR6n/
quelle
Oder führen Sie einfach das Skript am Ende Ihrer Seite aus
quelle
Sie müssen eine geeignete Tastenklickfunktion hinzufügen, um ein korrektes Ergebnis zu erzielen
$("#btn1").live(function() { alert("test"); });quelle