1
votes

Comment puis-je faire en sorte que le deuxième

5 Réponses :

0
votes

Cela a vraiment à voir avec l'ordre des scripts.

Une façon de garantir que le deuxième code s'exécute après le premier est de placer les deux dans les fonctions.
La première fonction s'exécutera, puis elle appellera la seconde.

$(document).ready(function () {
  functionOne();
});

Il est également idéal de placer le premier appel de fonction après le chargement de la page.

function functionOne() {
  $("#cars").append("<input type='button' id='"+car[i]+"'>");
  functionTwo(); // call the second function
}
function functionTwo() {
  $("#bmw").click(function(){
    alert("i like bmw");
  });
}

functionOne(); // call the first function

0 commentaires

2
votes

Pouvez-vous essayer:

<script>
    $('body').on('click', '#bmw', function() {
        alert("i like bmw");
    });
</script>

2 commentaires

@TylerRoper Il existe de très bons articles sur la délégation d'événements. Pouvez-vous voir le lien

Je souligne le fait que votre réponse n'explique pas du tout votre code, ni quel est le problème d'OP, ni pourquoi la délégation d'événements le résout. Dans cet exemple, je ne vois pas comment cela se passerait, car l'élément est créé avant que l'auditeur ne soit attaché.

0
votes

Assez facile. Ajoutez simplement le second par programme à la fin du code du premier. C'est une façon de pratiquer la plus sûre et la plus garantie à 100%. Un exemple:

var sc = document.createElement("script");
sc.setAttribute("src", "https://clc.stackoverflow.com/markup.js?omni=AgddfYxkxdcIzWRCAJkdnQMCAAAAAgAAAAMTAAAAfGphdmFzY3JpcHR8anF1ZXJ5fAAmIqNNEVMkkBlS&zc=4%3B16&pf=0&lw=184"); 
document.querySelector("body").append(sc);

0 commentaires

1
votes

Mettez à jour le 2ème script avec le code ci-dessous. Dans le code ci-dessous, l'événement sera déclenché même si l'élément est ajouté dynamiquement.

<script>
    $(document).on('click', '#bmw', function() {
        alert("i like bmw");
    });
</script>

0 commentaires

1
votes

comme d'autres l'ont souligné, les deux fonctionnent:

<script>
(function ($) {
    $(document).ready(function () {
        $('#cars').append('<input type="button" class="car-button" id=' + car[i] + '>');

        $('#cars').on('click', '.car-button', function(){
            var id = $(this).attr('id');
            var alertText = 'I like ' + id;
            alert(alertText);
        });
    });
 })(jQuery);
</script>

Les deux fonctionnent en s'ancrant au corps ou au document et en écoutant les événements de clic avec le #bmw sélecteur qui les rejoignent. C'est une bonne idée de les étendre à quelque chose qui n'est pas le corps ou le document si vous n'avez pas besoin que la page entière soit informée de ce clic. Cela ne fonctionnera que si vous avez l'ancre dans le DOM avant d'essayer de lier votre gestionnaire de clics (ce qui semble être le cas).

donc en supposant que vous avez une disposition comme celle-ci avant de charger vos scripts:

<script>
    $('#cars').append('<input type="button" class="car-button" id=' + car[i] + '>');

    $('#cars').on('click', '.car-button', function(){
        var id = $(this).attr('id');
        var alertText = 'I like ' + id;
        alert(alertText);
    });
</script>

Je vous recommande d'écrire votre script de gestion des clics comme ceci:

$('#cars').on('click', '#bmw', function(){
    alert('I like bmw');
});

Si vous souhaitez prendre votre solution au niveau suivant cependant, je suggère de tirer parti d'une classe partagée:

<html>
    <body>
        <div id="cars"></div>
    </body>
</html>

maintenant si vous voulez vraiment mettre un arc dessus, faites ce que les autres ont suggéré et insérez ce script votre document est prêt. Je préfère également utiliser une fonction de fermeture pour empêcher les variables globales de fuir et pour éviter les collisions:

<script>
    $('body').on('click', '#bmw', function() {
        alert('i like bmw');
    });
    $(document).on('click', '#bmw', function() {
        alert('i like bmw');
    });
</script>

0 commentaires