Ответ на событие щелчка элемента, добавленного в документ после загрузки страницы

Question

Я пишу страницу, которая использует много редактирования и обновления на месте, используя jQuery для AJAX.

Я столкнулся с проблемой, которую лучше всего описать с помощью описанного ниже рабочего процесса:

1. Нажатие 'element1' на странице приводит к JQuery AJAX POST
2. Данные получены в формате json
3. Данные получены в формате json
4. Полученные данные используются для обновления существующего элемента 'results' на странице
5. Полученные данные являются фактической HTML-формой
6. Я хочу, чтобы jQuery отвечал за размещение формы при нажатии кнопки формы

Проблема возникает в пункте 6 выше. У меня есть код на главной странице, который выглядит следующим образом:

$(document).ready(function(){
  $('img#inserted_form_btn').click(function(){
   $.ajax({'type': 'POST', 'url': 'www.example.com', 'success': function($data){
      $(data.id).html($data.frm);
     }), 'dataType': 'json'}
  });
});

Однако событие не инициируется. Я думаю, это потому, что, когда документ загружается впервые, элемент img # insert_form_btn не существует на странице (он вставляется в DOM в результате нажатия элемента на странице (не показано в приведенном выше коде - для оставьте вопрос коротким)

Поэтому мой вопрос: как я могу получить jQuery, чтобы иметь возможность отвечать на события, происходящие в элементах, которые были добавлены в DOM ПОСЛЕ загрузки страницы?

Answer 1

Используйте живой обработчик. ^{устарело с некоторого времени, проверьте вторую часть моего ответа для лучших решений!}

$('img#inserted_form_btn').live('click', function() {
    // Your click() code
});

---

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

$('#parent-element').on('click', '#inserted_form_btn', function() {
    // Your click() code
});

Если у вас нет jQuery 1.7 +:

$('#parent-element').delegate('#inserted_form_btn', 'click', function() {
    // Your click() code
});

В любом случае вы можете использовать делегат и использовать $(document) вместо $('#parent-element'), если нет подходящего родительского элемента.

Answer 2

Посмотрите на 1.4.2 .delegate()

Документация здесь: Делегат

Answer 3

Живые события - это то, что вы ищете.

Answer 4

live устарела, используйте .on () вот так:

$('#table tbody').on('click', 'tr', function(e){
    var row = $(this).find('td:first').text();
    alert('You clicked ' + row);
});

Answer 5

вы можете использовать live (), которая связывает функцию со всеми элементами, соответствующими вашему выбору, даже с теми, которые были созданы в будущем: http://api.jquery.com/live/

Answer 6

Вам нужно либо назначить щелчок даже в качестве события после обработки при первоначальном вызове AJAX, т.е.

$.ajax({ url: "test.html", context: document.body, success: function(){
    $('img#inserted_form_btn').click(function(){
        $.ajax({'type: 'POST', 'url': 'www.example.com', function($data){
            $(data.id).html($data.frm);
        }), 'dataType': 'json'}
    });
}});

или используйте метод .live, чтобы убедиться, что событие переназначается при создании элемента dom.