Javascript 如何在每次jQuery中加载元素时调用.ready？

我希望每次初始化Dom元素时都会触发一个事件，如下所示：

HTML

<div id="container">
    <div id="data">data!</div>
</div>

<div id="clickme">Click me!</div>​

编辑：我对通过ajax插入的元素进行编辑很感兴趣。例如：

$.post('/myaction/', {
     param: 'value'
  },
  function(data) {
      $('#someContainer').replaceWith(data);
  });

  // this function operates on elements returned by the ajax call, so they are not available at this point.
  myFunction();

  // so I'd better call myFunction() when the ajax data is inserted
});

$('#container').on('click', '#data', function() {
  alert('#data element was clicked!');
});

在这里摆弄：

对于更新后的问题，只需将函数移到回调，就完成了

---

虽然存在DOM变异事件，但我相信它们已被弃用，并且没有完全的浏览器支持

还有

livequery

插件，但它真的太过分了

.ready（）

处理程序不处理单个元素的加载事件。仅适用于DOM加载的事件。这三个示例都具有相同的行为：

• $（文档）.ready（…

• $（“文档”）.ready（…

• $（“#数据”）.ready（…

• $（）.ready（…

没有区别。传递给

$

的参数将被忽略

正确的解决方案是在创建元素时调用所需的代码

$(function() {
    var i = 0;
    $('#clickme').click(function() {
        $('#container').html('<div id="data">data '+i+'</div>');
        dataReady();
        i++;
    });

    function dataReady() {
        alert('element data ready!');
    }
});

$（函数（）{
var i=0；
$（'#clickme'）。单击（函数（）{
$（'#container'）.html（'data'+i+''）；
dataReady（）；
i++；
});
函数dataReady（）{
警报（“元素数据准备就绪！”）；
}
});

另外，根据您的示例，一个更好、破坏性更小的解决方案是简单地修改

#data

中的文本，而不是使用

.html（）

销毁元素。对于更新后的问题，只需将函数移到回调，就完成了

---

虽然存在DOM变异事件，但我相信它们已被弃用，并且没有完全的浏览器支持

还有

livequery

插件，但它真的太过分了

.ready（）

处理程序不处理单个元素的加载事件。仅处理DOM加载事件。这三个示例都具有相同的行为：

• $（文档）.ready（…

• $（“文档”）.ready（…

• $（“#数据”）.ready（…

• $（）.ready（…

没有区别。传递给

$

的参数将被忽略

正确的解决方案是在创建元素时调用所需的代码

$(function() {
    var i = 0;
    $('#clickme').click(function() {
        $('#container').html('<div id="data">data '+i+'</div>');
        dataReady();
        i++;
    });

    function dataReady() {
        alert('element data ready!');
    }
});

$（函数（）{
var i=0；
$（'#clickme'）。单击（函数（）{
$（'#container'）.html（'data'+i+''）；
dataReady（）；
i++；
});
函数dataReady（）{
警报（“元素数据准备就绪！”）；
}
});

另外，根据您的示例，更好、破坏性更小的解决方案是只修改

#data

中的文本，而不是使用

.html（）

ready

（或者更准确地说）销毁元素当页面被完全解析时，只触发一次。这里没有干净的方法来执行您想要的操作，因此您需要手动安装事件处理程序。（有DOM突变事件，但是这些事件太吵了，你的页面在试图处理它们时会吃掉自己，除非你真的知道自己在做什么，否则这通常是个坏主意）

但是，我怀疑您真正想要的是事件委派。您需要在

#container

而不是

#data

上安装事件，因为当调用ready函数时，现有的

#data

节点将从DOM中删除

例如：

$.post('/myaction/', {
     param: 'value'
  },
  function(data) {
      $('#someContainer').replaceWith(data);
  });

  // this function operates on elements returned by the ajax call, so they are not available at this point.
  myFunction();

  // so I'd better call myFunction() when the ajax data is inserted
});

$('#container').on('click', '#data', function() {
  alert('#data element was clicked!');
});

这样做的目的是在

#容器上安装一个处理程序（该处理程序永不更改），它侦听
单击
发起（或冒泡）的事件带有选择器
#data
的子元素。这意味着即使您不断替换
#container
的内容，也不必在其内容上安装新的事件处理程序。
就绪
（或者更准确地说）当页面被完全解析时，只触发一次。这里没有干净的方法来执行您想要的操作，因此您需要手动安装事件处理程序。（有DOM突变事件，但是这些事件太吵了，你的页面在试图处理它们时会吃掉自己，除非你真的知道自己在做什么，否则这通常是个坏主意）

但是，我怀疑您真正想要的是事件委派。您需要在
#container
而不是
#data
上安装事件，因为当调用ready函数时，现有的
#data
节点将从DOM中删除

例如：

$.post('/myaction/', {
     param: 'value'
  },
  function(data) {
      $('#someContainer').replaceWith(data);
  });

  // this function operates on elements returned by the ajax call, so they are not available at this point.
  myFunction();

  // so I'd better call myFunction() when the ajax data is inserted
});

$('#container').on('click', '#data', function() {
  alert('#data element was clicked!');
});

这样做的目的是在
#容器上安装一个处理程序（该处理程序永不更改），它侦听
单击
发起（或冒泡）的事件带有选择器
#data
的子元素。这意味着即使您不断替换
#container
的内容，您也不必在其内容上安装新的事件处理程序。
您可以使用
DOMNodeInserted
：

$(document).on('DOMNodeInserted', function() {
    alert('element data ready (live)');
});

每当一个节点被添加到DOM中时，就会触发它

您还可以过滤触发此事件的节点，如下所示：

$(document).on('DOMNodeInserted', '#data', function() {
    ...
}

现在，它将仅在添加ID为
data
的节点时触发。
您可以使用
domanodeinserted
：

$(document).on('DOMNodeInserted', function() {
    alert('element data ready (live)');
});

每当一个节点被添加到DOM中时，就会触发它

您还可以过滤触发此事件的节点，如下所示：

$(document).on('DOMNodeInserted', '#data', function() {
    ...
}

现在，它只会在添加ID为
data
的节点时触发。
为什么不将.ready放在按钮单击的内部，以便每次单击时都可以看到它是否准备就绪：

$(function() {
    var i = 0;
    $('#clickme').click(function() {
        $('#container').html('<div id="data">data ' + i + '</div>');
        i++;
        $('#data').ready(function() {
            alert('element data ready!');
        });
    });
});​

$（函数（）{
var i=0；
$（'#clickme'）。单击（函数（）{
$（'#container'）.html（'data'+i+''）；
i++；
$（'#data'）.ready（函数（）{
警报（“元素数据准备就绪！”）；
});
});
});​
为什么不将.ready放在单击按钮的内部，以便每次单击时都可以看到它是否已准备就绪：

$(function() {
    var i = 0;
    $('#clickme').click(function() {
        $('#container').html('<div id="data">data ' + i + '</div>');
        i++;
        $('#data').ready(function() {
            alert('element data ready!');
        });
    });
});​

$