Ich möchte ein Onclick-Ereignis an ein Element binden, das ich dynamisch mit jQuery einfüge
Aber die gebundene Funktion wird nie ausgeführt. Ich wäre froh, wenn Sie darauf hinweisen können, warum dieses Beispiel nicht funktioniert und wie ich es richtig laufen lassen kann:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">
<head>
<title>test of click binding</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
jQuery(function(){
close_link = $('<a class="" href="#">Click here to see an alert</a>');
close_link.bind("click", function(){
alert('hello from binded function call');
//do stuff here...
});
$('.add_to_this').append(close_link);
});
</script>
</head>
<body>
<h1 >Test of click binding</h1>
<p>problem: to bind a click event to an element I append via JQuery.</p>
<div class="add_to_this">
<p>The link is created, then added here below:</p>
</div>
<div class="add_to_this">
<p>Another is added here below:</p>
</div>
</body>
</html>
EDIT: Ich habe das Beispiel so bearbeitet, dass es zwei Elemente enthält, in die die Methode eingefügt wird. In diesem Fall wird der Aufruf alert()
nie ausgeführt. (Dank an @Daff, der mich in einem Kommentar darauf hingewiesen hat)
Wie wäre es mit der Live-Methode?
$('.add_to_this a').live('click', function() {
alert('hello from binded function call');
});
Dennoch sieht das, was Sie gemacht haben, so aus, als sollte es funktionieren. Es gibt einen anderen Beitrag, der ziemlich ähnlich aussieht.
Bedenken Sie dies:
jQuery(function(){
var close_link = $('<a class="" href="#">Click here to see an alert</a>');
$('.add_to_this').append(close_link);
$('.add_to_this').children().each(function()
{
$(this).click(function() {
alert('hello from binded function call');
//do stuff here...
});
});
});
Es wird funktionieren, weil Sie es an jedes spezifische Element anhängen. Deshalb müssen Sie - nachdem Sie Ihren Link zum DOM hinzugefügt haben - einen Weg finden, das hinzugefügte Element explizit als JQuery-Element im DOM auszuwählen und das Klick-Ereignis daran zu binden.
Der beste Weg ist wahrscheinlich - wie vorgeschlagen - die Bindung an eine bestimmte Klasse über die Live-Methode.