响应在页面加载后添加到文档的元素的点击事件 [英] Responding to click event of element added to document after page load

问题描述

我正在写一个使用jQuery for AJAX进行大量原位编辑和更新的页面。

我遇到了一个问题，可以通过下面描述的工作流最好地总结：

1. 点击页面上的'element1'会产生一个jQuery AJAX POST


2. 数据以json格式收到


3. 收到的数据json格式


4. 接收到的数据用于更新页面中现有元素的结果


5. 接收的数据实际上是HTML表单
6. 
   
7. 我希望jQuery在单击表单按钮时负责打印表单

问题出现在上面的第6点。我的主页中有代码如下：

  $（document）.ready（function（）{
 $（'img＃inserted_form_btn'）。click（function（）{
 $ .ajax（{'type'：'POST'，'url'：'www.example.com'，'success' （$ data）{
 $（data.id）.html（$ data.frm）; 
}），'dataType'：'json'} 
}）; 
 }）; 
  

但是，事件未被触发。我认为这是因为当文件首次加载时，页面上不存在img＃inserted_form_btn元素（由于在页面上点击了一个元素，因此它被插入到DOM中（上面的代码未显示）保持问题简短）

因此我的问题是：如何让jQuery能够响应添加到DOM的元素中发生的事件？加载？

解决方案

使用实时处理程序。自从一段时间以来，我们弃用了^{，请检查我的答案的第二部分以获得更好的解决方案！$（$'$'$'$'$'$'$'''''''''''' $ b //您的点击（）代码
}）;}

---

假设图像是绑定事件时已经存在的某个元素的子代，则可以使用委托：

  $（'＃parent-element'）。on（'click'，'#inserted_form_btn '，function（）{
 // Your click（）code 
}）; 
  

如果你没有jQuery 1.7 +：

代理（'＃inserted_form_btn'，'click'，function（）{
//你的click（）代码
}）;

无论如何，您可以使用代理，并使用 $（document） 而不是 $（'＃parent-element'）如果没有合适的父元素。

I am writing a page which uses a lot of in situ editing and updating using jQuery for AJAX.

I have come accross a problem which can best be summarized by the workflow described below:

1. Clicking on 'element1' on the page results in a jQuery AJAX POST
2. Data is received in json format
3. The data received in json format
4. The received data is used to update an existing element 'results' in the page
5. The received data is actual an HTML form
6. I want jQuery to be responsible for POSTing the form when the form button is clicked

The problem arises at point 6 above. I have code in my main page which looks like this:

$(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'}
  });
});

However, the event is not being triggered. I think this is because when the document is first loaded, the img#inserted_form_btn element does not exist on the page (it is inserted into the DOM as the result of an element being clicked on the page (not shown in the code above - to keep the question short)

My question therefore is: how can I get jQuery to be able to respond to events occuring in elements that were added to the DOM AFTER the page has loaded?

解决方案

Use a live handler. ^{deprecated since some time, check the second part of my answer for better solutions!}

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

---

Assuming the image is a child of some element that already exists when binding the event, you can use a delegate instead:

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

If you do not have jQuery 1.7+:

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

In any case, you can use a delegate and use $(document) instead of $('#parent-element') if there is no suitable parent element.

这篇关于响应在页面加载后添加到文档的元素的点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！