Question

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

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！如果是真的，为什么警报框正常弹出！

Answer 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，就会调用此代码，并为该动态加载内容中的任何匹配元素初始化插件。 / p>

JQuery父/子Ajax加载

1 个答案: