Любой родитель, который существует в момент привязки события, и если ваша страница динамически создавала элементы с помощью кнопки имени класса, вы привязывали бы событие к родительскому, который уже существует

$(document).ready(function(){
  //Particular Parent chield click
  $(".buttons").on("click","button",function(){
    alert("Clicked");
  });  
  
  //Dynamic event bind on button class  
  $(document).on("click",".button",function(){
    alert("Dymamic Clicked");
  });
  $("input").addClass("button");  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="buttons">
  <input type="button" value="1">
  <button>2</button>
  <input type="text">
  <button>3</button>  
  <input type="button" value="5">  
  </div>
<button>6</button>

Это чистое решение для JavaScript без каких-либо библиотек или плагинов:

document.addEventListener('click', function (e) {
    if (hasClass(e.target, 'bu')) {
        // .bu clicked
        // Do your thing
    } else if (hasClass(e.target, 'test')) {
        // .test clicked
        // Do your other thing
    }
}, false);

, где hasClass -

function hasClass(elem, className) {
    return elem.className.split(' ').indexOf(className) > -1;
}

Live demo

Credit идет к Дейву и Симе Видасу

Используя более современные JS, hasClass можно реализовать как:

function hasClass(elem, className) {
    return elem.classList.contains(className);
}

Я искал решение, позволяющее работать $.bind и $.unbind без проблем в динамически добавленных элементах.

Так как on () делает трюк для присоединения событий, чтобы создать поддельный unbind на тех, к которым я пришел:

const sendAction = function(e){ ... }
// bind the click
$('body').on('click', 'button.send', sendAction );

// unbind the click
$('body').on('click', 'button.send', function(){} );

Используйте метод .on() jQuery http://api.jquery.com/on/, чтобы присоединить обработчики событий к текущему элементу.

Также удаляется метод версии 1.9 .live().

Вот почему динамически созданные элементы не реагируют на клики & nbsp;:

var body = $("body");
var btns = $("button");
var btnB = $("<button>B</button>");
// `<button>B</button>` is not yet in the document.
// Thus, `$("button")` gives `[<button>A</button>]`.
// Only `<button>A</button>` gets a click listener.
btns.on("click", function () {
  console.log(this);
});
// Too late for `<button>B</button>`...
body.append(btnB);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>A</button>

В качестве обходного пути вам необходимо прослушать все клики и проверить source element & nbsp;:

var body = $("body");
var btns = $("button");
var btnB = $("<button>B</button>");
// `<button>B</button>` is not yet in the document.
// Thus, `$("button")` gives `[<button>A</button>]`.
// Only `<button>A</button>` gets a click listener.
btns.on("click", function () {
  console.log(this);
});
// Too late for `<button>B</button>`...
body.append(btnB);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>A</button>

Это называется «Event Delegation». Хорошая новость, это встроенная функция в jQuery: -)

var body = $("body");
var btns = $("button");
var btnB = $("<button>B</button>");
// `<button>B</button>` is not yet in the document.
// Thus, `$("button")` gives `[<button>A</button>]`.
// Only `<button>A</button>` gets a click listener.
btns.on("click", function () {
  console.log(this);
});
// Too late for `<button>B</button>`...
body.append(btnB);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>A</button>

Я предпочитаю использовать селектор, и я применяю его в документе.

Это привязывается к документу и будет применяться к элементам, которые будут отображаться после загрузки страницы.

] Например:

$(document).on("click", $(selector), function() {
    // Your code here
});

вы можете использовать

$('.buttons').on('click', 'button', function(){
    // your magic goes here
});

или

$('.buttons').delegate('button', 'click', function() {
    // your magic goes here
});

, эти два метода эквивалентны, но имеют другой порядок параметров.

см .: jQuery Событие делегата

Вы можете присоединить событие к элементу при динамическом создании с помощью jQuery(html, attributes).

function handleDynamicElementEvent(event) {
  console.log(event.type, this.value)
}
// create and attach event to dynamic element
jQuery("<select>", {
    html: $.map(Array(3), function(_, index) {
      return new Option(index, index)
    }),
    on: {
      change: handleDynamicElementEvent
    }
  })
  .appendTo("body");

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

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

$('.wrapper-class').on("click", '.selector-class', function() {
    // Your code here
});

Примечание:

Элемент-оболочка-оболочка может быть любым ex. документа, тела или вашей обертки. Обертка должна уже существовать.

Обратите внимание на класс «MAIN», в который помещается элемент, например

<div class="container">
     <ul class="select">
         <li> First</li>
         <li>Second</li>
    </ul>
</div>

В приведенном выше сценарии объект MAIN, который будет наблюдать jQuery, является «контейнером».

Тогда вы в основном будете иметь имена элементов в контейнере, такие как ul, li и select:

$(document).ready(function(e) {
    $('.container').on( 'click',".select", function(e) {
        alert("CLICKED");
    });
 });

Более гибкое решение для создания элементов и связывания событий (source)

// creating a dynamic element (container div)
var $div = $("<div>", {id: 'myid1', class: 'myclass'});

//creating a dynamic button
 var $btn = $("<button>", { type: 'button', text: 'Click me', class: 'btn' });

// binding the event
 $btn.click(function () { //for mouseover--> $btn.on('mouseover', function () {
    console.log('clicked');
 });

// append dynamic button to the dynamic container
$div.append($btn);

// add the dynamically created element(s) to a static element
$("#box").append($div);

Примечание. Это создаст экземпляр обработчика события для каждого элемента (может повлиять на производительность при использовании в цикле)

Попробуйте это -

$(document).on( 'click', '.click-activity', function () { ... });

Я предпочитаю, чтобы прослушиватели событий были развернуты модульной функцией, а не сценарием прослушивателя событий уровня document. Итак, мне нравится ниже. Обратите внимание: вы не можете переписывать элемент с тем же самым прослушивателем событий, поэтому не беспокойтесь о прикреплении слушателя более одного раза - только один палец.

var iterations = 4;
var button;
var body = document.querySelector("body");

for (var i = 0; i < iterations; i++) {
    button = document.createElement("button");
    button.classList.add("my-button");
    button.appendChild(document.createTextNode(i));
    button.addEventListener("click", myButtonWasClicked);
    body.appendChild(button);
}

function myButtonWasClicked(e) {
    console.log(e.target); //access to this specific button
}

Связывает событие с родителем, который уже существует:

$(document).on("click", "selector", function() {
    // Your code here
});

В документации jQuery.fn.on есть хорошее объяснение.

Короче:

Таким образом, в следующем примере #dataTable tbody tr должен существовать до генерации кода.

$("#dataTable tbody tr").on("click", function(event){
    console.log($(this).text());
});

Если на страницу вводится новый HTML, предпочтительнее использовать делегированные события для присоединения обработчика событий, как описано ниже.

Делегированные события имеют то преимущество, что они могут обрабатывать события из элементов-потомков, которые будут добавлены в документ позже. Например, если таблица существует, но строки добавляются динамически с использованием кода, следующее будет обрабатывать ее:

$("#dataTable tbody").on("click", "tr", function(event){
    console.log($(this).text());
});

В дополнение к их способности обрабатывать события на дочерних элементах, которые еще не созданы, другим преимуществом делегированных событий является их потенциал для гораздо более низких накладных расходов, когда необходимо контролировать многие элементы. В таблице данных с 1000 строк в tbody первый пример кода прикрепляет обработчик к 1000 элементам.

Подход с делегированными событиями (второй пример кода) прикрепляет обработчик события только к одному элементу , tbody, и событию нужно только выровнять один уровень (от нажатого tr до tbody).

Делегированные события Делегированные события не работают для jQuery.fn.on .

Попробуйте использовать .live() вместо .bind(); .live() свяжет .hover с вашим флажком после выполнения запроса Ajax.