回复页面加载后添加到文档中的单击事件

我正在编写一个页面，它使用jQuery for AJAX进行大量原位编辑和更新。回复页面加载后添加到文档中的单击事件

我来翻过这最好由工作流程如下所述概括了一个问题：在一个jQuery AJAX POST

数据的页面结果

点击“部件1” JSON格式接收JSON格式
接收到的数据被用于在页面
更新现有的元件“结果”接收
的数据的接收到的数据是实际的HTML表单
我想要的形式按钮被点击

，就会出现问题，当在点6的上方jQuery来负责张贴形式。我的代码在我的主页中，如下所示：

$(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＃inserted_form_btn元素在页面上不存在（它被插入到DOM中，作为页面上单击的元素的结果（未在上面的代码中显示 - 保持这个问题短期）

所以我的问题是：我如何才能让jQuery来能够对被添加到DOM的事件中的元素存在的响应后在页面加载

来源

2010-05-12 morpheous

注意这个问题，其中有。对，.live，.delegate的一些讨论和.click http://stackoverflow.com/questions/10983244/unsure-about-on-method/10983259#comment14346416_10983259 - 添加这个参考，以保持这个问题的网站/上下文 – 2012-06-13 12:30:22

使用现场处理？ ^{因为一些时间弃用，检查我的回答的第二部分，更好的解决方案！}

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

来源

2010-05-12 14:52:31 ThiefMaster

+1，而文档：http://api.jquery.com/live/ – Joel 2010-05-12 14:53:12

最好使用事件委托（.delegate（））。请参阅官方页面上的解释http://api.jquery.com/live/ – 2012-06-13 10:50:17

我不认为在发布此答案时存在此方法。 – ThiefMaster 2012-06-13 10:52:45

Live events是你在找什么。

来源

2010-05-12 14:52:34

您需要可以指定点击甚至在最初的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元素时被重新分配。

来源

2010-05-12 14:53:36 Lazarus

你可以使用实况（）结合的功能，符合选择的所有要素，即使是那些在将来创建： http://api.jquery.com/live/

来源

2010-05-12 14:53:56 santiagozky

看1.4。2 .delegate()

的文档是在这里：Delegate

来源

2010-05-12 15:00:09

现场已被弃用，使用。对（）像这样：

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

来源

2013-05-23 19:41:21 Ethereal

回复页面加载后添加到文档中的单击事件

回答

相关问题