响应页面加载后添加到文档的元素的单击事件

时间:2010-05-12 14:49:43

标签: jquery dom

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

我遇到了一个问题,可以通过下面描述的工作流程进行总结:

  1. 点击页面上的“element1”会产生jQuery AJAX POST
  2. 以json格式收到数据
  3. 以json格式收到的数据
  4. 收到的数据用于更新页面中现有元素的“结果”
  5. 收到的数据实际上是HTML表单
  6. 我希望jQuery在单击表单按钮时负责POST表单
  7. 问题出现在上面的第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#inserted_form_btn元素(由于在页面上单击了一个元素(未在上面的代码中显示),因此将其插入到DOM中保持问题简短)

    我的问题是:如何让jQuery能够响应页面加载后添加到DOM中的元素中发生的事件?

6 个答案:

答案 0 :(得分:10)

使用实时处理程序。 已经弃用了一段时间,请查看我的答案的第二部分以获得更好的解决方案!

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

答案 1 :(得分:1)

Live events正是您要找的。

答案 2 :(得分:1)

查看1.4.2 .delegate()

文档在这里:Delegate

答案 3 :(得分:0)

您需要在最初的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元素时重新分配事件。

答案 4 :(得分:0)

您可以使用live()将函数绑定到与您的选择匹配的所有元素,即使是将来创建的元素: http://api.jquery.com/live/

答案 5 :(得分:0)

live已弃用,请使用.on(),例如:

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