Как связать динамически именованные события с динамическими элементами с помощью jQuery

Question

У меня есть элементы внутри DOM, которые содержат атрибут, называемый «data-event».

Возможно, некоторые из этих элементов динамически добавляются в DOM, например, после запроса ajax.

Я доступ к атрибуту данных событий элемента с JQuery этим путем, конечно:

$('.element-selector').data('event') 

атрибута данных событий содержит имя события, к которому должен быть присоединен обработчик функции. Скажем, эта функция называется generalHandler().

Я не могу использовать функцию .on напрямую, потому что я не знаю имя события, к которому присоединяется функция до тех пор, пока я не получу доступ к самому элементу, и .on требуется имя события, которое будет указано первым (конечно).

Я мог бы использовать .each для того, чтобы получить доступ к каждому $ («[данных событие]») и извлечь имя события и прикрепить функцию к нему, все внутри функции обратного вызова вызывается .each ,

Использование .each, во всяком случае, также не является хорошим решением, поэтому я не обрабатываю все динамически добавленные элементы $ ('[data-event]').

Я мог бы использовать элемент вставленного элемента DOM, прикрепляя его к телу и ожидая добавления [данных-событий] элементов в DOM, но я знаю, что эти события устарели. Я мог бы расширить объект MutationObserver, но я ничего не знаю о кодировании производительности.

Я хотел бы знать, есть ли способ сделать то, что мне нужно, используя только одну команду/функцию, возможно, используя .on в некотором «магическом» способе или что-то подобное. Я не хотел бы использовать MutationObserver, потому что я должен дважды выполнять операцию привязки к событию (один для существующих элементов и другой для динамических), я не уверен, как использовать его, сохраняя оптимальную производительность страницы и я не знаю точно, как правильно реализовать его, чтобы сделать только и только то, что мне нужно (найти имя события и приложить к нему обработчик для THAT-элемента).

Любая идея? Спасибо.

Answer 1

Если я правильно вас понял. Вы хотите выполнить действие на основе события, которое предоставляется в атрибуте данных элемента, и это событие будет отличаться для каждого добавленного элемента. Если это так, вы можете попробовать что-то вроде этого.

<div class="container"> 

</div> 

$(".container") 
.append("<div data-event='click' class='child'>Click</div>") 
.append('<div data-event="mouseover" class="child">Mouseover</div>') 
.append('<div data-event="mouseout" class="child">Mouseout</div>'); 

// Listen to all the possible event that can be triggered 
$(".container").on("click mouseover mouseout", ".child", function(e){ 

    // If the required event was triggered for this element then perform the action 
    if(e.type === $(this).data("event")){ 
    console.log("Perform " + e.type); 
    } else{ 
    console.log("Don't Perform " + e.type); 
    } 

}); 

Вот ссылка на JSFiddle