jquery rebinding events с .on/.off

Question

В настоящее время я сортирую разделы DOM, помещая их в массив, запуская сортировку, а затем добавляя их обратно в DOM - это работает нормально.

Проблема, с которой я столкнулась, - это переустановка необходимых событий щелчка. Это урезанная версия 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> 

Рода/Append происходит на уровне ид = member1/member2 так ID = "AllMembers" не двигается/изменить.

Я имел клики событие на месте, как это для открытия/удаление/штыря класс элементов, такие как:

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

однако это .он работает только до первого рода/добавить. После этого он больше не срабатывает.

Как настроить события щелчка для элементов, которые перемещаются (не являются статическими), как это?

Answer 1

Делегирование событий.

Присоединение события к родительскому узлу и передача событий из определенных дочерних узлов для захвата во время подбора.

Heres синтаксис:

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

Больше информации здесь: http://api.jquery.com/on/