Ereignisbindung bei dynamisch erstellten Elementen?

Question

Ich habe ein bisschen Code, wo ich bin Schleife durch alle Auswahlfelder auf einer Seite und Bindung einer .hover Ereignis an sie, um ein wenig an ihrer Breite zu schrauben mouse on/off .

Dies geschieht, sobald die Seite fertig ist und funktioniert einwandfrei.

Das Problem, das ich habe, ist, dass alle Auswahlfelder, die ich über Ajax oder DOM nach der ersten Schleife hinzufügen, nicht das Ereignis gebunden haben.

Ich habe dieses Plugin gefunden ( jQuery Live Query Plugin ), aber bevor ich ein weiteres 5k zu meinen Seiten mit einem Plugin hinzufügen, möchte ich sehen, ob jemand einen Weg kennt, dies zu tun, entweder mit jQuery direkt oder durch eine andere Option.

Answer 1

Dies ist der Grund, warum dynamisch erstellte Elemente nicht auf Klicks reagieren:

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>

Als Abhilfe müssen Sie auf alle Klicks hören und das Quellelement überprüfen:

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>

Dies wird "Ereignisdelegation" genannt. Gute Nachrichten, es ist eine eingebaute Funktion in 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>

Answer 2

Jedes p arent, der existiert zu dem Zeitpunkt, an dem das Ereignis gebunden wird, und wenn Ihre Seite dynamisch erzeugte Elemente mit dem Klassennamen Taste würden Sie das Ereignis an ein bereits vorhandenes übergeordnetes Ereignis binden

$(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>

Answer 3

Binden Sie das Ereignis an ein bereits vorhandenes übergeordnetes Ereignis:

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

Answer 4

Verwenden Sie die .on() Methode von jQuery http://api.jquery.com/on/ um Ereignishandler an Live-Elemente anzuhängen.

Auch ab Version 1.9 .live() Methode wird entfernt.

Answer 5

Eine weitere flexible Lösung, um Elemente zu erstellen und Ereignisse zu binden ( Quelle )

// 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);

Nota: Dadurch wird für jedes Element eine Instanz eines Ereignishandlers erstellt (kann bei Verwendung in Schleifen die Leistung beeinträchtigen)