jQuery: die Bindung eines einzigen Ereignis-listener, die Ereignisse behandeln kann, seine Kinder

Stieß ich auf eine Frage, auf die ich nicht wissen, die Lösung für.

Nehme an, dass ich das HTML-markup (dynamisch vom server generiert oder einfach eine statische Datei):

<ul class="myList">
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
<li><a href="page4.html">Page 4</a></li>
<li><a href="page5.html">Page 5</a></li>
<li><a href="page6.html">Page 6</a></li>
<!-- ... -->
<li><a href="page1000.html">Page 1000</a></li>
</ul>

Ich soll binden Sie einen click-Ereignishandler, um die <a> tag. Normalerweise würde ich schreiben,

$('.myList').find('a').click(function() {});  /* Or something similar */

würde führen implizite iteration auf alle anchor-tags zu binden, ein click-Ereignis für jeden von Ihnen. Allerdings wurde mir gesagt, dass dies ist ein teurer Vorgang.

Wurde ich gefragt, ob es irgendeine Möglichkeit zur Befestigung nur eines Ereignis-Listeners (auf dem ul-tag) und verwenden Sie Ereignis-bubbling, um herauszufinden, welche Anker-tag geklickt wurde. Ich habe noch nie begegnet, so etwas wie dieses, so wusste ich nicht die Antwort. Offenbar gibt es eine Antwort. Weiß jemand, wie eines einzigen Ereignis-listener auf ein element und haben es herauszufinden, welches Kind-element wurde angeklickt? (Ich immer noch auf event.preventDefault() verhindern, dass die Standard-click-Ereignis.)

InformationsquelleAutor Stephen | 2011-06-02
  1. 12

    Check-out delegieren() — es ist genau das, was Sie für Fragen.

    $('ul.mylist').delegate('a', 'click', function() {
  //... your code ...
});

    Erhalten Sie alle Vorteile eines jQuery-handler, die zimmerreserviereung, ohne das zu tun, die bindend für alle diese Elemente.

    InformationsquelleAutor Pointy
  2. 4

    Können Sie den Zugriff event.target, die das element, das dem Ereignis gestartet.

    $('.myList').click(function(event) {
   var target = $(event.target);
});

    jsFiddle.

    Jedoch Spitzen Antwort scheint, einfacher zu sein zu verwenden.

    • Auch nützlich zu wissen, aber ich Stimme dir zu .delegate() ist einfacher zu verwenden.
    InformationsquelleAutor alex
  3. 1

    Wenn Sie eine version von jQuery >= 1.7 .auf() Methode verdrängt .delegate(). In beiden jQuery 2.x und 1.11 .delegate() ruft einfach .on():

    delegate: function( selector, types, data, fn ) {
        return this.on( types, selector, data, fn );
}

    Verwenden Sie in diesem Fall:

    $(".myList li a").on("click", function(e) {
  //Code here, and you can use e.preventDefault(); to avoid the default event.
});
    InformationsquelleAutor Sean Fahey
  4. 0

    Die Funktion, die Sie anfügen, wird ein Ereignis-parameter enthält das Objekt, das angeklickt wird, im event.target.

     $(.....).click(function(event){  ....  });

    Andere Lösung, komplexer, aber mehr auch flexibel, obwohl Sie nicht brauchen, es in dieser situation, ist die Verwendung der .bind Methode, und geben Sie ein Daten-Objekt

    $(.....).bind('click', {whateverproperty: whatevervalue}, function(event){ ... });

    In diesem Fall können Sie erreichen event.data.whateverproperty, also das abrufen des Werts whatevervalue, so dass Sie mehr komplexe Entscheidungen.

    InformationsquelleAutor GolezTrol
Schreibe einen Kommentar