Powiązanie zdarzeń z dynamicznie tworzonymi elementami?

Jest dobre wyjaśnienie w dokumentacji jQuery.fn.on.

W skrócie:

Procedury obsługi zdarzeń są powiązane tylko z aktualnie wybranymi elementami; muszą istnieć na stronie w momencie, gdy twój kod wywoła .on().

Tak więc w poniższym przykładzie {[4] } musi istnieć przed wygenerowaniem kodu.

$("#dataTable tbody tr").on("click", function(event){
    console.log($(this).text());
});

Jeśli nowy HTML jest wstrzykiwany do strony, lepiej jest użyć delegowanych zdarzeń do dołączenia obsługi zdarzenia, ponieważ opisane dalej.

Delegowane zdarzenia mają tę zaletę, że mogą przetwarzać zdarzenia z elementów potomnych, które zostaną dodane do dokumentu w późniejszym czasie. Na przykład, jeśli tabela istnieje, ale wiersze są dodawane dynamicznie za pomocą kodu, zajmie się nią:

$("#dataTable tbody").on("click", "tr", function(event){
    console.log($(this).text());
});

Oprócz możliwości obsługi zdarzeń na elementach potomnych, które nie zostały jeszcze utworzone, kolejną zaletą zdarzeń delegowanych jest ich potencjał znacznie niższy, gdy wiele elementy muszą być monitorowane. W tabeli danych z 1000 wierszami w tbody, pierwszy przykład kodu dołącza obsługę do 1000 elementów.

Podejście delegowane-events (drugi przykład kodu) dołącza obsługę zdarzenia Tylko do jednego elementu, tbody, a zdarzenie musi tylko przesunąć się o jeden poziom (z klikniętego tr do tbody).

Uwaga: delegowane zdarzenia nie działają dla SVG .

To jest czysty JavaScript rozwiązanie bez bibliotek i wtyczek:

document.addEventListener('click', function (e) {
    if (hasClass(e.target, 'bu')) {
        // .bu clicked
        // Do your thing
    } else if (hasClass(e.target, 'test')) {
        // .test clicked
        // Do your other thing
    }
}, false);

Gdzie hasClass jest

function hasClass(elem, className) {
    return elem.className.split(' ').indexOf(className) > -1;
}

live demo

kredyt idzie do Dave i Sime Vidas

Używając bardziej nowoczesnego JS, hasClass można zaimplementować jako:

function hasClass(elem, className) {
    return elem.classList.contains(className);
}

Możesz dodawać zdarzenia do obiektów podczas ich tworzenia. Jeśli dodajesz te same zdarzenia do wielu obiektów w różnym czasie, dobrym rozwiązaniem może być utworzenie funkcji o nazwie.

var mouseOverHandler = function() {
    // Do stuff
};
var mouseOutHandler = function () {
    // Do stuff
};

$(function() {
    // On the document load, apply to existing elements
    $('select').hover(mouseOverHandler, mouseOutHandler);
});

// This next part would be in the callback from your Ajax call
$("<select></select>")
    .append( /* Your <option>s */ )
    .hover(mouseOverHandler, mouseOutHandler)
    .appendTo( /* Wherever you need the select box */ )
;

Możesz po prostu zawinąć wywołanie powiązania zdarzeń w funkcję, a następnie wywołać je dwa razy: raz w dokumencie ready i raz po zdarzeniu, które dodaje nowe elementy DOM. Jeśli to zrobisz, będziesz chciał uniknąć powiązania tego samego zdarzenia dwa razy z istniejącymi elementami, więc będziesz musiał albo odłączyć istniejące zdarzenia lub (lepiej) powiązać tylko z nowo utworzonymi elementami DOM. Kod wyglądałby mniej więcej tak:

function addCallbacks(eles){
    eles.hover(function(){alert("gotcha!")});
}

$(document).ready(function(){
    addCallbacks($(".myEles"))
});

// ... add elements ...
addCallbacks($(".myNewElements"))

Spróbuj użyć .live() zamiast .bind(); .live() powiąże .hover do twojego pola wyboru po wykonaniu żądania Ajax.

Powiązanie zdarzeń na dynamicznie tworzonych elementach

Pojedynczy element:

$(document.body).on('click','.element', function(e) {  });

Element Potomny:

 $(document.body).on('click','.element *', function(e) {  });

Zauważ dodane *. Zdarzenie zostanie wywołane dla wszystkich dzieci tego elementu.

Zauważyłem, że:

$(document.body).on('click','.#element_id > element', function(e) {  });

Wolę używać selektora i nakładam go na dokument.

To wiąże się z dokumentem i będzie miało zastosowanie do elementów, które będą renderowane po załadowaniu strony.

Na przykład:

$(document).on("click", 'selector', function() {
    // Your code here
});

Można użyć metody live() do wiązania elementów (nawet nowo utworzonych) do zdarzeń i procedur obsługi, takich jak Zdarzenie onclick.

Oto przykładowy kod, który napisałem, gdzie możesz zobaczyć, jak metoda live() wiąże wybrane elementy, nawet nowo utworzone, ze zdarzeniami:

<!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">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
    </head>

    <body>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js"></script>

        <input type="button" id="theButton" value="Click" />
        <script type="text/javascript">
            $(document).ready(function()
                {
                    $('.FOO').live("click", function (){alert("It Works!")});
                    var $dialog = $('<div></div>').html('<div id="container"><input type ="button" id="CUSTOM" value="click"/>This dialog will show every time!</div>').dialog({
                                                                                                         autoOpen: false,
                                                                                                         tite: 'Basic Dialog'
                                                                                                     });
                    $('#theButton').click(function()
                    {
                        $dialog.dialog('open');
                        return('false');
                    });
                    $('#CUSTOM').click(function(){
                        //$('#container').append('<input type="button" value="clickmee" class="FOO" /></br>');
                        var button = document.createElement("input");
                        button.setAttribute('class','FOO');
                        button.setAttribute('type','button');
                        button.setAttribute('value','CLICKMEE');
                        $('#container').append(button);
                    });
                    /* $('#FOO').click(function(){
                                                     alert("It Works!");
                                                 }); */
            });
        </script>
    </body>
</html>

Innym rozwiązaniem jest dodanie słuchacza podczas tworzenia elementu. Zamiast umieścić słuchacza w ciele, umieszczasz słuchacza w elemencie w momencie jego utworzenia:

var myElement = $('<button/>', {
    text: 'Go to Google!'
});

myElement.bind( 'click', goToGoogle);
myElement.append('body');


function goToGoogle(event){
    window.location.replace("http://www.google.com");
}

odbywa się to poprzez delegację zdarzeń. Event otrzyma bind na elemencie klasy wrapper, ale zostanie delegowany do elementu klasy selektora. Tak to działa.

$('.wrapper-class').on("click", '.selector-class', function() {
    // Your code here
});

I HTML

<div class="wrapper-class">
    <button class="selector-class">
      Click Me!
    </button>
</div>    

#Uwaga: elementem klasy wrapper może być cokolwiek ex. dokument, ciało lub opakowanie. Wrapper powinien już istnieć . Jednak selector niekoniecznie musi być prezentowany w czasie ładowania strony. Może przyjść później, a wydarzenie będzie wiązało się z selector bez porażki .

Spróbuj w ten sposób -

$(document).on( 'click', '.click-activity', function () { ... });

Zwróć uwagę na klasę "MAIN" element jest umieszczony, na przykład,

<div class="container">
     <ul class="select">
         <li> First</li>
         <li>Second</li>
    </ul>
</div>

W powyższym scenariuszu głównym obiektem obserwowanym przez jQuery jest "container".

Wtedy będziesz miał w zasadzie nazwy elementów pod kontenerem, takie jak ul, li, i select:

$(document).ready(function(e) {
    $('.container').on( 'click',".select", function(e) {
        alert("CLICKED");
    });
 });

You could use

$('.buttons').on('click', 'button', function(){
    // your magic goes here
});

Lub

$('.buttons').delegate('button', 'click', function() {
    // your magic goes here
});

Te dwie metody są równoważne, ale mają inną kolejność parametrów.

Zobacz: jQuery Delegate Event

Można dołączyć Zdarzenie do elementu dynamicznie tworzonego za pomocą jQuery(html, attributes).

Od jQuery 1.8, każda metoda instancji jQuery (Metoda jQuery.fn) może być używana jako właściwość obiektu przekazanego do drugi parametr:

function handleDynamicElementEvent(event) {
  console.log(event.type, this.value)
}
// create and attach event to dynamic element
jQuery("<select>", {
    html: $.map(Array(3), function(_, index) {
      return new Option(index, index)
    }),
    on: {
      change: handleDynamicElementEvent
    }
  })
  .appendTo("body");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

Oto dlaczego dynamicznie tworzone elementy nie odpowiadają na kliknięcia:

var body = $("body");
var btns = $("button");
var btnB = $("<button>B</button>");
// `<button>B</button>` is not yet in the document.
// Thus, `$("button")` gives `[<button>A</button>]`.
// Only `<button>A</button>` gets a click listener.
btns.on("click", function () {
  console.log(this);
});
// Too late for `<button>B</button>`...
body.append(btnB);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>A</button>

Jako obejście musisz wysłuchać wszystkich kliknięć i sprawdzić element źródłowy:

var body = $("body");
var btnB = $("<button>B</button>");
var btnC = $("<button>C</button>");
// Listen to all clicks and
// check if the source element
// is a `<button></button>`.
body.on("click", function (ev) {
  if ($(ev.target).is("button")) {
    console.log(ev.target);
  }
});
// Now you can add any number
// of `<button></button>`.
body.append(btnB);
body.append(btnC);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>A</button>

To się nazywa "Delegacja zdarzeń". Dobra wiadomość, to wbudowana funkcja w jQuery: -)

var i = 11;
var body = $("body");
body.on("click", "button", function () {
  var letter = (i++).toString(36).toUpperCase();
  body.append($("<button>" + letter + "</button>"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>A</button>

Dowolny P arent, który istnieje w momencie wiązania zdarzenia i jeśli twoja strona była dynamicznie tworząca Elementy z przyciskiem o nazwie klasy , powiązałbyś Zdarzenie z rodzicem, który już istnieje

$(document).ready(function(){
  //Particular Parent chield click
  $(".buttons").on("click","button",function(){
    alert("Clicked");
  });  
  
  //Dynamic event bind on button class  
  $(document).on("click",".button",function(){
    alert("Dymamic Clicked");
  });
  $("input").addClass("button");  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="buttons">
  <input type="button" value="1">
  <button>2</button>
  <input type="text">
  <button>3</button>  
  <input type="button" value="5">  
  </div>
<button>6</button>

Powiązać Zdarzenie z rodzicem, który już istnieje:

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

Inne elastyczne rozwiązanie do tworzenia elementów i wiązania zdarzeń (source)

// creating a dynamic element (container div)
var $div = $("<div>", {id: 'myid1', class: 'myclass'});

//creating a dynamic button
 var $btn = $("<button>", { type: 'button', text: 'Click me', class: 'btn' });

// binding the event
 $btn.click(function () { //for mouseover--> $btn.on('mouseover', function () {
    console.log('clicked');
 });

// append dynamic button to the dynamic container
$div.append($btn);

// add the dynamically created element(s) to a static element
$("#box").append($div);

Uwaga: spowoduje to utworzenie instancji obsługi zdarzeń dla każdego elementu (może mieć wpływ na wydajność, gdy jest używana w pętlach)

Użyj metody {[0] } jQuery http://api.jquery.com/on / aby dołączyć procedury obsługi zdarzeń do elementu aktywnego.

Również od wersji 1.9 .live() metoda jest usuwana.

Wolę, aby słuchacze zdarzeń były rozmieszczone w modularny sposób niż skryptowanie słuchacza zdarzeń poziomu document. Tak, lubię poniżej. Uwaga, nie można przecenić elementu z tym samym słuchaczem zdarzeń, więc nie martw się o dołączenie słuchacza więcej niż raz - tylko jeden kij.

var iterations = 4;
var button;
var body = document.querySelector("body");

for (var i = 0; i < iterations; i++) {
    button = document.createElement("button");
    button.classList.add("my-button");
    button.appendChild(document.createTextNode(i));
    button.addEventListener("click", myButtonWasClicked);
    body.appendChild(button);
}

function myButtonWasClicked(e) {
    console.log(e.target); //access to this specific button
}

<html>
    <head>
        <title>HTML Document</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    </head>

    <body>
        <div id="hover-id">
            Hello World
        </div>

        <script>
            jQuery(document).ready(function($){
                $(document).on('mouseover', '#hover-id', function(){
                    $(this).css('color','yellowgreen');
                });

                $(document).on('mouseout', '#hover-id', function(){
                    $(this).css('color','black');
                });
            });
        </script>
    </body>
</html>

Szukałem rozwiązania, aby $.bind i $.unbind działały bez problemów w dynamicznie dodawanych elementach.

Jako on () robi sztuczkę, aby dołączyć zdarzenia, w celu stworzenia fałszywego unbind na tych, do których przyszedłem:

const sendAction = function(e){ ... }
// bind the click
$('body').on('click', 'button.send', sendAction );

// unbind the click
$('body').on('click', 'button.send', function(){} );