jQuery Event Delegation

[Chronos]

Hallo,

ich habe eine Frage zur Event Delegation,

ich habe eine Reihe von Buttons, die alle das gleiche tun, ihren Wert in ein Textfeld schreiben und möchte jetzt,
statt auf jeden Button einen Event-Handler zu legen diesen zunächst auf dessen Elternelement legen und dann entscheiden was getan werden soll.

// Um Buttons liegendes DIV
var btn_box = $('#btn-box');
// Buttons im DIV
var btn_value = $('a.btn-value');
var txt_value = $('#txt-value');

// Erste Version ohne Delegation:
btn_value.on({
      "click": function() {
        txt_value.val($(this).attr('data-value'));
      }
});

// Mit Delegation:
btn_box.on("click", btn_value), function() {
  txt_value.val($(this).attr('data-value'));
};

Zu meinem Versuch der Delegation habe ich ein paar Fragen:
1. Ist der generelle Aufbau so richtig? Meinem Verständnis nach, "lege" ich einen Event-Handler auf ein Elternelement und sobald in diesem geklickt wird, wird der Event-Handler auf dessen Kindelement delegiert.
Stimmt das vom Verständnis her?

2. Kann ich mit $(this) weiterhin, auf das data-value von btn_value zugreifen und wenn nein wie?
3. Der Fehler den ich bekomme, wenn ich einen der Buttons klicke ist:
"Uncaught TypeError: Object [object Object] has no method 'apply'" was sagt mir das?

4. Gibt es sont noch interessantes zur Event-Delegation zu wissen?

 

[Tronjer]

Der Fehler rührt wahrscheinlich daher, dass du hier als zweiten Parameter ein jQuery-Objekt übergibst.

// Mit Delegation:
btn_box.on("click", btn_value), function() {
  txt_value.val($(this).attr('data-value'));
};

Versuche es mal mit einem String:

var btn_value ='a.btn-value';

 

[Chronos]

Hm das scheint es noch nicht zu sein. Auch wenn ich daraus einen String mache kommt noch der unter 3. genannte Fehler. Überhaupt, wenn es dann ein String ist könnt ich ja eh nicht mehr mit this auf das Objekt zugreifen oder?

Gibt es noch jemanden er eine Idee hat und noch die anderen Fragen beantworten kann :)?

danke schon mal.

 

[derwunner]

Hi, also in jquery sollte man generell für ein onClick Ereignis die .click - Function verwenden.

Würde dann also in deinem Fall so aussehen:

$('#btn-box').click(function()
                                     {
                                            // do sth.
                                     });

Für allgemeine Event-Deklarationen, würde es so aussehen:

$('#btn-box').on("eventname",
                                   function()
                                   {
                                          // do sth.
                                  });

Wenn du das Event nur genau einmal benötigst, dann gibt es dafür auch noch die Function .one in jquery.

Ich würde dir aber nicht empfehlen click-Ereignisse per jquery zu definieren, mache das lieber über das onClick Attribut im HTML Element selber. Sonst suchst du dich beim Debuggen irgendwann mal blöd.

Gruß, derwunner