Как найти все события внутри контейнера и делегировать их

Question

Предположим, у меня есть разметка, как это

<div class="container">

    <div class="abc" onclick="alert(this.innerHTML)">ABC</div>
    <div class="abc1">ABC</div>
    <div class="abc2">abc2</div>
    <div class="xys3">xys3</div>
    <div class="asd23">asd223</div>

</div>

И есть события, которые связаны с children из container как это

$( ".abc1" ).bind( "click", function(){
   alert( $( this ).html() );
} );

$( ".abc2" ).bind( "click", function(){
   alert( $( this ).html() );
} );

$( ".xys3" ).bind( "click", function(){
   alert( $( this ).html() );
} );

$( ".asd23" ).bind( "click", function(){
   alert( $( this ).html() );
} );

Теперь я достал HTML из контейнера и снова установил его:

var html = $( ".container" ).html();
// a set missing here to convert 'bind' events to 'on' events
$( ".container" ).html( html );

События не будут работать сейчас, так как они не были делегированы для начала. Кроме того, контейнер может иметь больше элементов (они являются динамическими).

Можно ли найти все события внутри контейнера и делегировать их?

Вот скрипка

Answer 1

Начиная с jQuery 1.7, .on() Метод является предпочтительным методом для присоединения обработчиков событий к документу. Для более ранних версий .bind() Метод используется для прикрепления обработчика событий непосредственно к элементам.

Так что просто используйте делегирование событий на (), и это решит проблему:

$( "body" ).on( "click", ".abc2", function(){
    alert( $( this ).html() );
});

Вы можете добавить общий класс ко всем элементам div, а затем присоединить к нему событие click:

HTML:

<div class="container">

  <div class="my-class abc" onclick="alert(this.innerHTML)">ABC</div>
  <div class="my-class abc1">ABC</div>
  <div class="my-class abc2">abc2</div>
  <div class="my-class xys3">xys3</div>
  <div class="my-class asd23">asd223</div>

</div>

JS:

$( "body" ).on( "click", ".my-class", function(){
     alert( $( this ).html() );
});

Надеюсь это поможет.

---

$( "body" ).on( "click", ".my-class", function(){
  alert( $( this ).html() );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <div class="my-class abc" onclick="alert(this.innerHTML)">ABC</div>
  <div class="my-class abc1">ABC</div>
  <div class="my-class abc2">abc2</div>
  <div class="my-class xys3">xys3</div>
  <div class="my-class asd23">asd223</div>

</div>

Answer 2

Методы делегирования такие:

$(document).on( "click", ".abc1", function(){
     alert( $( this ).html() );
});

Ты можешь измениться $(document) с элементом в DOM, который не изменился, и это родительский элемент для дочерних элементов, которые необходимо делегировать. С документом будет работать во всех случаях, но производительность может быть меньше.