rafraîchir le DOM après l'ajout d'un élément
résolu:
le problème principal était avec elle:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
jquery était trop vieux, je pense
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
Problème résolu:)
pourquoi alert ne fonctionne-t-il pas après append DOM? Devrait afficher "bla bla" après cliquez dessus.
<!doctype html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#main_body').append("<h1>Hello</h1><input id="but" type="button">Click");
$( "#but" ).on( "click", function() {
alert( "bla bla" );
});
});
</script>
</head>
<body id="main_body">
</body>
</html>
4 réponses
pour les éléments ajoutés dynamiquement dont vous avez besoin d'une délégation d'événement, utilisez l'autre version sur jQuery on () , vous pouvez déléguer l'événement au parent statique des éléments ajoutés dynamiquement. Dans votre cas, vous pouvez utiliser #main_body
$('#main_body').on( "click", "#but", function() {
alert( "bla bla" );
});
les événements délégués ont l'avantage de pouvoir traiter des événements à partir de éléments descendants ajoutés ultérieurement au document. Par choisir un élément qui est garanti d'être présent au moment de l' le gestionnaire d'événements délégué est attaché, vous pouvez utiliser les événements délégués pour éviter la nécessité de fixer et de retirer fréquemment les gestionnaires d'événements, jQuery Docs
votre code fonctionne ici comme il est parce que vous ajoutez l'élément dynamique avant de lier l'événement, mais en utilisant la délégation d'événement vous libérera de la séquence que vous utilisez pour ajouter les éléments dynamiques.
, Vous devez utiliser "151930920 de l'événement" délégation dynamique de l'élément ajouté.
$(document).ready(function() {
$('#main_body').append("<h1>Hello</h1><input id=\"but\" type=\"button\">Click");
$('#main_body').on('click', '#but', function() {
alert( "bla bla" );
});
});
délégation D'événement nous permet d'attacher un auditeur d'événement unique, à un élément parent, qui s'allume pour tous les enfants correspondant à un sélecteur, si ces enfants existent maintenant ou s'ils seront ajoutés à l'avenir
utiliser comme ceci
<!doctype html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function () {
$('#main_body').append("<h1>Hello</h1><input id=\"but\" type=\"button\">Click");
$(document).on("click", "#but", function () {
alert("bla bla");
});
});
</script>
</head>
<body id="main_body">
</body>
vous devez utiliser "151980920 de l'événement" délégation pour que
il vous aide à attacher les gestionnaires pour les éléments dynamiquement créés
Vous code devrait fonctionner
$(document).ready(function () {
$('#main_body').append("<h1>Hello</h1><input id=\"but\" type=\"button\">Click");
$("#but").on("click", function () { //element is in DOM now as it added in previous statement
alert("bla bla");
});
});