CODEWITHSUNDEEP
jqueryevents
Adam
Adam

Reputation: 20882

jquery rebinding events with .on/.off

I'm currently sorting sections of the DOM by putting them into a array, running through sort and then appending them back into the DOM - this is working fine.

The issue I'm having is rebinding the required click events. This is a cut-down version of the DOM:

<div id="allmembers">

  <div id="member1">
    <img class="openmessage"/>
    <img class="deletemessage"/>
    <img class="pinmessage"/>
  </div>

  <div id="member2">
    <img class="openmessage"/>
    <img class="deletemessage"/>
    <img class="pinmessage"/>
  </div>

</div>

The sort/append occurs at the id= member1/member2 level so id="allmembers" doesn't move/change.

I did have click events in place like this for open/delete/pin class elements like:

$('#allmembers .openmessage).on('click', function(e) {
  alert('open message');
});

however this .on only works before the first sort/append. After it doesn't fire anymore.

How do I setup click events for elements that move (are no static) like this?

Upvotes: 0

Views: 35

Answers (1)

Varinder
Varinder

Reputation: 2664

Try event delegation.

Attaching event to parent node and letting events from specific child nodes to be captured while bubling up.

heres the syntax:

$('#allmembers').on('click', '.openmessage', function(e) {
   alert('open message');
});

More info here: http://api.jquery.com/on/

Upvotes: 2

Related Questions