Example

Question

当我使用Ajax提交表单时，我想重新加载已更改的页面部分，而不是整个页面，为此我正在使用：

$('#body_container').load(a_href);

其中a_href是源文件的位置。运行此命令并更新#body_container后，div的新内容似乎无法访问原始页面标题中包含的脚本文件，即使它包含在此原始页面中。只有将<script type="text/javascript" src="files.js"></script>放在a_href文件的开头时才有效。

然而，我实际上在#body_container内部有很少的div，我也在改变，所以这样做，我files.js被包含在不同级别的很多次。这似乎导致了冲突。

有没有办法在文档标题中包含files.js一次，然后拥有所有div，无论它们的内容何时创建，始终会识别出该文件在那里，等待使用？

Answer 1

在每个加载中包含相同的JS文件有点多。我的建议是第一次将文件包含在主head中。然后使用“委托”作为“动态”元素。

例如，假设我正在加载一个视图partial，它将具有类似于最初加载的链接按钮。因此我希望它们保持相同的点击功能。而不是典型的分配，例如：

$("a.bob").click(function(e) { e.preventDefault(); alert($(this).prop("href")); });

我将使用“委托”。 jQuery为我们提供了一种简单的方法，可以将相同的事件|方法分配给具有匹配选择器的所有项目（现在和将来[动态]）。这样做的方法如下：

$(document).on("click", "a.bob", function(e) {
    e.preventDefault();
    alert($(this).prop("href"));
});

之前的代码会告诉所有a个bob类标签不会去任何地方，并提醒我们他们的链接。这与a标记添加到DOM的时间无关。

Example

要记住一件事，.on是jQuery版本1.72（我认为）的新内容。在此之前，您可以使用.live甚至.delegate代替。

在旁边注意

当然，代表团只会参与“事件”。如果您需要使用JavaScript进行类似“布局”移动的操作，那么您最好制作一个“回调”函数，以便在ajax请求成功时使用。同样，您可以将这些回调方法放在单头文件中，但是您需要在$ .ajax [success或complete]中根据需要“调用”它们。

请参阅success和complete http://api.jquery.com/jQuery.ajax/，详细了解ajax调用的基本回调。此外，从版本1.7开始，您可以根据需要维护列表或callbacks的jQuery对象。要获取有关回调列表的详细信息，请参阅http://api.jquery.com/category/callbacks-object/

如果这还不够，请发表评论，我会尝试更清楚地提出任何问题。

Answer 2

脚本中的事件处理程序在动态加载的内容中不起作用的实际问题是什么？

如果是这种情况，请更改这些事件处理程序以使用事件委派。例如：

$("#body_container").on( 'click', '#my-div', function() {...});

或者：

$("#body_container").delegate( '#my-div', 'click', function() {...});

其中#my-div是动态内容中的某个元素。

现在，即使您只在首次加载页面时加载脚本，事件处理程序仍然有效。

Answer 3

如果我理解正确的问题，问题是您在动态加载时不会初始化外部文件中的元素。

您应该使用jQuery complete 方法的 .load() （回调）参数;在相应的请求完成时执行。这是documentation。

加载外部内容的主要PHP / HTML文件：

<html>
<head>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){

            // This is the function to be called from the externally 
            // loaded content.
            function functionToBeCalled() {
                alert("Called function in the main (loader) page!");
            }

            // This is the handler method that executes when the AJAX request
            // is complete. You can initialize the DOM elements in the external
            // content files here.
            function initOnLoad(responseText, textStatus, XMLHttpRequest) {
                // attach event listeners when the load is complete:
                $('#external-div').on('click', '#external-btn', functionToBeCalled);
            }

            $(".manage_link").click(function(e){
                e.preventDefault();
                var a_href = $(this).attr('href');
                // passing the initOnLoad callback as param here:
                $('#ajax_manage').load(a_href, initOnLoad);
            });
        });
    </script>
</head>
<body>
    <ul>
        <li><a class="manage_link" href="ajax_1.php">Manage 1</a></li>
        <li><a class="manage_link" href="ajax_2.php">Manage 2</a></li>
    </ul>
    <div id="ajax_manage"></div>
</body>
</html>

外部内容1（ajax_1.php）：

<div id="external-div">
    External Content <b>1</b><br />
    <button id="external-btn" type="button">Call Function (from ajax 1)</button>
</div>

外部内容2（ajax_2.php）：

<div id="external-div">
    External Content <b>2</b><br />
    <button id="external-btn" type="button">Call Function (from ajax 2)</button>
</div>

jQuery脚本文件加载两次

3 个答案:

Example

在旁边注意