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

Question

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

form.html(动态加载)

带有按钮的 main.html，单击时显示 DIV 并动态加载 form.html。

在我的 main.html 中，我有 JS 假设可以找到表单标签(从动态加载的表单)并进一步处理它(我使用 jQuery)。我本可以将该 JS 包含在 form.html 中，然后它就可以工作，但我想做的是将我的 JS 放在 main.html 中，但能够使用它来操纵动态加载的内容。那能实现吗？谢谢。

编辑:

表单.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

是的，通过事件委托(delegate)。假设以下 input 是动态加载的:

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

要捕获此元素的点击事件，我们会将事件绑定(bind)到元素的容器(在此示例中为 document)并监听对该元素的点击:

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

引用:http://api.jquery.com/on/