utiliser la .on() méthode Avec événements délégués

$('#staticParent').on('click', '.dynamicElement', function() {
    // Do something on an existent or future .dynamicElement
});

le .on() la méthode vous permet de déléguer n'importe quel handler d'événement désiré à:

éléments actuels ou futurs ajoutés ultérieurement au DOM.

_{P. S: N'utilisez pas .live() ! De jQuery 1.7+ la méthode .live() est dépréciée.}

raison:

dans jQuery, cliquez sur()- attache le gestionnaire d'événements seulement si l'élément existe déjà dans le code html.

il ne considérera pas le nouvel élément qui est créé dynamiquement(élément futur) après la page chargée.

les éléments dynamiques sont créés avec l'aide de javascript ou jquery(pas en html) .

donc l'événement click ne démarre pas.

Solution:

pour surmonter cela, nous devrions utiliser la fonction on () .

délégué(),live() et () fonctions ont l'avantage, par rapport aux éléments du DOM.

on peut déclencher à la fois des éléments existants et des éléments futurs.

peut considérer les éléments qui sont tous présents dans la page entière.

délégué(),live() les fonctions sont obsolètes(Ne pas utiliser ces).

vous devez utiliser sur fonction pour déclencher l'événement sur les (futurs) éléments dynamiquement créés.

supprimer le code de $(document).prêt:

$(".test").click(function(){

  alert();

});

Modifier pour:

$(document).on('click','.test',function(){

  alert('Clicked');

});

Ajouter cette fonction dans votre fichier js. il fonctionnera sur chaque navigateur

$(function() {
    $(document).on("click", '#mydiv', function() {
        alert("You have just clicked on ");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='mydiv'>Div</div>

Changement

 $(".test").click(function(){

à

 $(".test").live('click', function(){

LIVE DEMO

jQuery .live()

, Vous devez utiliser .live pour que cela fonctionne:

$(".test").live("click", function(){
   alert();
});

ou si vous utilisez jquery 1.7+ utilisez .sur :

$(".test").on("click", "p", function(){
   alert();
});

Essayer .live() ou .delegate()

http://api.jquery.com/live /

http://api.jquery.com/delegate /

votre élément .test a été ajouté après la méthode .click() . Live et Delegate donnent ce déclencheur d'événement aux éléments parents qui vérifient leurs enfants, de sorte que tout ce qui a été ajouté après fonctionne toujours. Je pense Live vérifiera tout le corps du document, tandis que Delegate peut être donné à un élément, donc Delegate est plus efficace.

plus d'informations:

http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate /

j'ai trouvé deux solutions à la documentation de jQuery:

premier: utiliser délégué sur corps ou Document

e. g:

 $("body").delegate('.test', 'click', function(){
 ...
  alert('test');
 });

pourquoi?

réponse: attachez un handler à un ou plusieurs événements pour tous les éléments qui correspondent au sélecteur, maintenant ou dans le futur, basé sur un ensemble spécifique d'éléments racine. lien: http://api.jquery.com/delegate /

Second: mettez votre fonction au " $ (document)" , en utilisant "on" et attachez-la à l'élément que vous voulez déclencher cela. Le premier paramètre est le "gestionnaire d'événement", le second: l'élément et la troisième: la fonction. Par exemple:

 $( document ).on( 'click', '.test', function () {
 ...
  alert('test');
 });

pourquoi?

Réponse: les gestionnaires d'Événements sont liés uniquement pour les éléments sélectionnés; ils doivent exister sur la page au moment de votre code fait l'appel .sur() . Pour s'assurer que les éléments sont présents et peuvent être sélectionnés, exécutez la liaison d'événement à l'intérieur d'un gestionnaire de document prêt pour les éléments qui sont dans le balisage HTML sur la page. Si du nouveau HTML est injecté dans la page, sélectionnez les éléments et attachez les gestionnaires d'événements après que le nouveau HTML est placé dans la page. Ou, utilisez événements délégués pour joindre un gestionnaire d'événements, comme décrit ci-dessous ... lien: https://api.jquery.com/on /

meilleure façon d'appliquer l'événement sur le contenu généré dynamiquement en utilisant la délégation.

$(document).on("eventname","selector",function(){
    // code goes here
});

donc votre code est comme ça maintenant

$(document).on("click",".test",function(){
    // code goes here
});

$(.surrounding_div_class).on( 'click', '.test', function () {
alert( 'WORKS!' );
});

ne fonctionnera que si le DIV avec la classe .surrounding_div_class est le parent immédiat de l'objet .essai

S'il y a un autre objet dans le div qui sera rempli, il ne fonctionnera pas.

le problème que vous avez est que vous essayez de lier la classe" test "à l'événement avant qu'il n'y ait quoi que ce soit avec une classe" test "dans le DOM . Bien qu'il puisse sembler comme ceci est tout dynamique, ce qui se passe vraiment est JQuery fait un passage au-dessus du DOM et fils vers le haut de l'événement de clic quand la fonction ready() s'allume, qui se produit avant que vous ayez créé le "Click Me" dans votre événement de bouton.

en ajoutant l'événement de clic "test" à le" bouton " click handler il le branche vers le haut après que l'élément correct existe dans le DOM .

<script type="text/javascript">
    $(document).ready(function(){                          
        $("button").click(function(){                                  
            $("h2").html("<p class='test'>click me</p>")                          
            $(".test").click(function(){                          
                alert()                          
            });       
        });                                     
    });
</script>

utiliser live() (comme d'autres l'ont souligné) est une autre façon de faire cela, mais j'ai pensé que c'était aussi une bonne idée de souligner la petite erreur dans votre code JS. Ce que vous avez écrit n'était pas mal, il fallait juste qu'il soit correctement scopé. Comprendre comment le DOM et JS fonctionne est l'une des choses sournoises pour de nombreux développeurs pour envelopper leur tête autour.

live() est une façon plus propre de gérer cela et dans la plupart des cas est la bonne façon d'aller. Il s'agit essentiellement de regarder le DOM et de re-câblage des choses chaque fois que les éléments à l'intérieur de changer.

.en direct de la fonction fonctionne très bien.

c'est pour les éléments dynamiquement ajoutés à la scène.

$('#selectAllAssetTypes').live('click', function(event){
                    alert("BUTTON CLICKED");
                    $('.assetTypeCheckBox').attr('checked', true);
                });

santé, Ankit.

Jquery .on fonctionne bien mais j'ai eu quelques problèmes avec le rendu de la mise en œuvre de certaines des solutions proposées ci-dessus. Mon problème en utilisant le .on est qu'il rendait les événements différemment que la méthode .hover .

juste pour info pour toute autre personne qui pourrait aussi avoir le problème. J'ai résolu mon problème en réenregistrant l'événement de vol stationnaire pour l'Article ajouté dynamiquement:

réinscrire l'événement de vol stationnaire parce que le vol stationnaire ne fonctionne pas pour les éléments créés dynamiquement. donc à chaque fois que je crée le nouvel article/dynamic j'ajoute le code hover à nouveau. fonctionne parfaitement

$('#someID div:last').hover(
    function() {
       //...
    },
    function() {
       //...
    }
);

Je ne pouvais pas obtenir live ou délégué pour travailler sur un div dans une boîte de lumière (tinybox).

j'ai utilisé setTimeout avec succès, de la manière simple suivante:

$('#displayContact').click(function() {
    TINY.box.show({html:'<form><textarea id="contactText"></textarea><div id="contactSubmit">Submit</div></form>', close:true});
    setTimeout(setContactClick, 1000);
})

function setContactClick() {
    $('#contactSubmit').click(function() {
        alert($('#contactText').val());
    })
}

vous pouvez Aussi utiliser onclick="do_something(this)" à l'intérieur de l'élément

Une alternative et plus succincte (IMHO) est d'utiliser une fonction javascript brute qui répond à un événement on click, puis passer l'élément cible de nouveau à jQuery si vous le souhaitez. L'avantage de cette approche est que vous pouvez ajouter dynamiquement votre élément n'importe où, et le gestionnaire de clic "ne fera que fonctionner", et vous n'avez pas besoin de vous préoccuper de déléguer le contrôle aux éléments parents, et ainsi de suite.

Étape 1: mettre à jour la dynamique html pour lancer un événement onclick. Assurez-vous de passer l'objet 'event' comme argument

    $("button").click(function() {
        $("h2").html("<p class='test' onclick='test(event)'> click me </p>")
    });

Étape 2: créer la fonction de test pour répondre à l'événement de clic

    function test(e){
        alert();
    });

étape optionnelle 3: étant donné que vous utilisez jQuery, je suppose qu'il sera utile de récupérer une référence vers le bouton source

    function test(e){
        alert();

        // Get a reference to the button
        // An explanation of this line is available here
        var target = (e.target)? e.target : e.srcElement;

        // Pass the button reference to jQuery to do jQuery magic
        var $btn = $(target);

    });

je travaille avec des tables qui leur ajoutent de nouveaux éléments dynamiquement, et en utilisant on (), la seule façon de le faire fonctionner pour moi est d'utiliser un parent non dynamique comme:

<table id="myTable">
    <tr>
        <td></td> // Dynamically created
        <td></td> // Dynamically created
        <td></td> // Dynamically created
    </tr>
</table>

<input id="myButton" type="button" value="Push me!">

<script>
    $('#myButton').click(function() {
        $('#myTable tr').append('<td></td>');
    });

    $('#myTable').on('click', 'td', function() {
        // Your amazing code here!
    });
</script>

C'est vraiment utile, car, pour supprimer les événements liés à () , vous pouvez utiliser off " (éteint) , et pour utiliser les événements une fois, vous pouvez utiliser () .

vous pouvez ajouter en cliquant sur les éléments dynamiquement créés. L'exemple ci-dessous. À l'aide d'un Quand prendre sûr de son fait. Dans mon exemple, je saisis un div avec la classe expand, en ajoutant un span" Cliquez pour voir plus", puis en utilisant ce span pour masquer/afficher le div original.

$.when($(".expand").before("<span class='clickActivate'>Click to see more</span>")).then(function(){
    $(".clickActivate").click(function(){
        $(this).next().toggle();
    })
});

si vous avez un lien ajouté dinamicalement à un contenant ou à la caisse:

var newLink= $("<a></a>", {
        "id": "approve-ctrl",
        "href": "#approve",
        "class": "status-ctrl",
        "data-attributes": "DATA"
    }).html("Its ok").appendTo(document.body);

vous pouvez prendre son élément JavaScript brut et y ajouter un écouteur d'événements, comme le cliquez sur :

newLink.get(0).addEventListener("click", doActionFunction);

peu importe combien de fois vous ajoutez cette nouvelle instance de lien, vous pouvez l'utiliser comme si vous utilisiez une fonction jquery click .

function doActionFunction(e) {
    e.preventDefault();
    e.stopPropagation();

    alert($(this).html());
}

donc vous recevrez un message disant

c'est ok

il a une meilleure performance que d'autres alternatives.

Extra : vous pourriez obtenir de meilleures performances en évitant jquery et en utilisant le javascript simple. Si vous utilisez IE jusqu'à la version 8, vous devez utiliser ce polyfill pour utiliser la méthode addEventListener

if (typeof Element.prototype.addEventListener === 'undefined') {
    Element.prototype.addEventListener = function (e, callback) {
      e = 'on' + e;
      return this.attachEvent(e, callback);
    };
  }

utilisez " on " car le clic lie les éléments déjà présents.

pour E. g

$('test').on('click',function(){
    alert('Test');
})

ça va aider.