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

Eine andere Lösung besteht darin, den Hörer bei der Erstellung des Elements hinzuzufügen. Anstatt den Hörer in den Körper zu setzen, setzen Sie den Hörer in das Element in dem Moment, in dem Sie es erstellen:

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

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

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

Answer 2

Versuchen Sie es auf diese Weise -

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

Answer 3

Notieren Sie sich zum Beispiel die Klasse "MAIN", in der das Element platziert ist,

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

Im obigen Szenario ist das HAUPT-Objekt, das jQuery beobachten wird, "container".

Dann haben Sie grundsätzlich Elemente, die unter Container benannt sind, wie z. B. ul , li y select :

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

Answer 4

Sie können ein Ereignis an ein dynamisch erstelltes Element anhängen, indem Sie jQuery(html, attributes) .

Ab jQuery 1.8 eine beliebige jQuery-Instanzmethode (eine Methode von jQuery.fn ) kann als eine Eigenschaft des Objekts verwendet werden, das an den zweiten Parameter übergeben wird:

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>

Answer 5

Könnten Sie verwenden

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

o

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

Diese beiden Methoden sind gleichwertig, haben aber eine unterschiedliche Reihenfolge der Parameter.

siehe: jQuery Delegate Ereignis