Mootols: Wie man Klick-Funktion an programmatisch generierte Elemente bindet

Question

Ich habe eine einfache JavaScript-Funktion, die einige Links auf einer Seite generiert, wenn auf eine Schaltfläche geklickt wird. Jetzt möchte ich eine Klickfunktion für diese generierten Links hinzufügen. Ich habe jedem eine Klasse hinzugefügt, aber es funktioniert immer noch nicht. Alles passiert in Echtzeit und das folgende mooTools-Skript funktioniert nicht, obwohl es auf der Seite gut geladen ist.

window.addEvent('domready', function() { 
    $$('.jTrigger').addEvent('click', function(){alert('clicked!');}) 
    }) 

Ich bin für die jQuery-Äquivalent von

$(document).ready(function() 
{ 
$(".myClass").live("click", function() 
{ 
    do stuff here... 
}; 
}); 

Ich würde verwenden Schließung oder jQuery (Sachen weiß ich, wie zu benutzen), aber ich bin auf einer Joomla-Backend-Plugin und mir wurde gesagt, ich solle bei MooTools bleiben.

Answer 1

MooTools unterstützt event delegation auch. Hier ist das Beispiel aus der Dokumentation:

// Adding the event, notice the :relay syntax with the selector that matches the target element inside of myElement. 
// Every click on an anchor-tag inside of myElement executes this function. 
myElement.addEvent('click:relay(a)', function(event, target){ 
    event.preventDefault(); 
    request.send({ 
     url: target.get('href') 
    }); 
}); 

Also bei einer Vermutung (ich habe noch nie verwendet MooTools), würde ich sagen, dass, wenn Sie haben die Klasse myClass auf die Elemente in Frage hinzugefügt:

window.addEvent('domready', function() { 
    $(document).addEvent('click:relay(.myClass)', function() { 
     // One of the elements was clicked 
    }); 
}); 

Wenn Sie eine ältere Version von MooTools verwenden, die keine Ereignisdelegierung unterstützt, ist das kein Problem, Sie können es selbst tun. Grundsätzlich haken Sie das Ereignis auf dem Container (könnte document.body sein, aber wenn möglich wieder näher an wo Sie die Elemente hinzufügen), und dann, wenn das Ereignis ausgelöst wird, sehen Sie event.target, die Ihnen das eigentliche Element sagen wird das Ereignis ist eingetreten. Beginnen Sie mit event.target, überprüfen Sie jedes Elternteil, um zu sehen, ob es myClass hat. Wenn ja, bearbeiten Sie das Ereignis. Also grob:

Answer 2

Wenn Ihr Code ausgeführt wird, ist der Link nicht vorhanden und das addEvent wird sie nicht aufpeppen. Sie können diese Behauptung mit einem einfachen console.log überprüfen (mit Firebug auf ff mindestens)

window.addEvent('domready', function() { 
    console.log($$('.jTrigger'); 
    $$('.jTrigger').addEvent('click', function(){alert('clicked!');}) 
}) 

Sie haben zwei Wahl:

• das Verhalten zu jedem Link jedes Mal hinzufügen, es erstellt wird (ein bisschen plump mir)

• ein Dom Element wählen (das kleinste Element ihnen) und gelten ein Event-Manager in Relais es enthält:

  window.addEvent ('domready', function() { Dokument. ID (document.body) .addEvent ('click: relay (a.jTrigger)', Funktion() {alert ('clicked!');}); })

In dem obigen Beispiel habe ich das Verhalten auf den HTML-Körper angewandt, wie ich nichts von Ihrer Seite wissen und das Körperelement wird sicherlich enthält Ihre Links. Sie benötigen , um dieses Verhalten auf eine kleinere Teilmenge anzuwenden (Minimierung des Leistungsproblems, da in der Dokumentation eindeutig berichtet wird).

Im Allgemeinen ist es immer besser, an die nächsten Eltern zu Ihre Elemente wie möglich zu delegieren; Delegieren Sie ein Element auf der Seite eher als der Dokumentkörper zum Beispiel.

Referenz: http://mootools.net/docs/core/Element/Element.Delegation