1

将 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>
4

2 回答 2

2

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

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

为了捕获这个元素的点击事件，我们将事件绑定到元素的容器（在这个例子中document）并监听对该元素的点击：

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

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

于 2013-06-20T13:41:35.450 回答
0

要么按照 tymeJV 的建议在更改 DOM 后对其进行处理，要么将 ready-event 添加到新添加的内容并从 ready 事件调用所需的代码。仅当您无法直接控制 dom 更改时，我才更喜欢第一个和第二个。

于 2013-06-20T13:46:43.320 回答