Question

将JS应用于动态加载的内容的最佳方法是什么。我想说有这个：

form.html（动态加载）

main.html带有一个按钮，当点击DIV显示并且form.html动态加载时。

在我的main.html中我有JS假设找到表单标签（来自动态加载的表单）并进一步处理它（我使用jQuery）。我可以在form.html中包含JS然后它可以工作，但我想要做的是在main.html中使用我的JS并且能够用它来操纵动态加载的内容。可以实现吗？感谢。

编辑：

form.html

<form id="f"><input name="i"/></form>

main.html中

<script>
$(document).ready(function() {
  $('#b').on('click', function() {
    $('#div').load('form.hmtl');

    //Again, I know that I can pass JS code into load() call. I want to be able
    //to avoid that.
  });

  var $form = $('#f');

  $form.mask() //it's a jquery plugin that blocks mouse clicks on a specific element

  //note that form is not yet loaded. I know that I can pack the code above into a
  //function and pass it with .on('click', function(){}) call. The question is:
  //is it possible to avoid that.
});
</script>
<button id="b">Load Form</button>
<div id="div"></div>

Answer 1

是的，有事件委托。假设动态加载以下input：

<input type="button" value="click me" id="btnTest" />

要捕获此元素click事件，我们将事件绑定到元素的容器（在此示例中为document）并侦听该元素的单击：

$(document).on('click', '#btnTest', function() {
    console.log("You clicked dynamic content!");
});

参考：http://api.jquery.com/on/

Answer 2

您可以在更改DOM之后按照tymeJV建议处理它，或者向新添加的内容添加ready事件并从ready事件中调用所需的代码。如果你没有直接控制dom变化，我宁愿选择第一和第二。

如何在动态加载的内容中加载JS？

2 个答案: