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>
16
demandé sur user3345547 2014-03-13 13:01:59

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.

25
répondu Adil 2014-03-13 09:09:33

, 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

12
répondu Felix 2014-03-13 09:02:51

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

6
répondu Anoop Joshi 2014-03-13 09:05:53

Vous code devrait fonctionner

Démo Du Violon

$(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");
    });
});
1
répondu Tushar Gupta 2014-03-13 09:05:28