1

页面 Parent.htm 包含一个通过 ajax 请求加载 Child.htm 的 div。

Parent.htm 包含一个脚本

<script type="text/javascript" src="myinput.js" />"></script>

myinput.js 包含一个名为 myInput 的小部件。在小部件的末尾，它具有将此小部件添加到某些输入的功能，如下所示：

(function($) {
$.fn.myInput= function(options) {
 .....................
 ....................

$(document).ready(function() {
    alert('Function called');
    $("input[lang='fa']").myInput();
});

child.htm 非常简单：

<input name="test" lang="fa">

child.html 中不包含脚本。

当我运行 parent.htm 时，child.htm 加载并弹出警报消息，但未应用小部件。

当我将下面的行添加到 child.html 时，小部件可以工作。

$(document).ready(function() {
    $("input[lang='fa']").myInput();
});

它表明准备好的 jQuery 文档没有应用于 child.html ！如果是真的，为什么会弹出警告框正常工作！

4

1 回答 1

1

显示警报消息是因为它不依赖于动态加载的内容 (child.html)。只要文档准备好，警报就会显示，而不管任何其他事件：

$(document).ready(function() {
    alert('Function called');
    // other code
});

未应用插件的原因是即使文档（parent.html）已准备好，动态内容尚未加载：

$(document).ready(function() {
    // other code
    $("input[lang='fa']").myInput();
});

代码不会等待 AJAX 调用来加载其他内容，文档在进行这些调用之前“准备就绪”，当然在收到对这些调用的响应之前。因此，在代码运行时，此选择器不会找到您正在动态加载的元素：

$("input[lang='fa']")

虽然您可以通过延迟绑定事件来解决此问题，但使用插件并非如此，因为内容需要存在于 DOM 中才能使插件工作。因此，当 AJAX 调用成功时，您需要做的是在通过 AJAX 加载的元素上再次初始化插件。例如：

$("#someDiv").load("child.html", function() {
    $("#someDiv input[lang='fa']").myInput();
});

虽然您已经拥有的代码将为 parent.html 中的任何匹配元素初始化插件，但一旦加载 child.html 并为该动态加载内容中的任何匹配元素初始化插件，就会调用此代码。

于 2013-09-21T11:00:06.933 回答