9

当我使用 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，不管它们的内容是什么时候创建的，总是认识到这个文件在那里，等待使用？

4

3 回答 3

6

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

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

$("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 无关。

例子

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

旁注

当然，委派只会处理“事件”。如果您需要将 JavaScript 用于“布局”移动之类的操作，那么您最好创建一个“回调”函数，以便在 ajax 请求成功时使用。同样，您可以将这些回调方法放在一个头文件中，但是您需要在 $.ajax[success 或 complete] 中根据需要“调用”它们。

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

如果这还不够信息，请发表评论，我会尽量让您有任何问题更清楚。

于 2013-06-03T19:43:11.940 回答
1

如果我理解这个问题是正确的，那么问题是您在动态加载外部文件时没有初始化外部文件中的元素。

您应该使用jQuery方法的complete(callback) 参数；.load()当相应的请求完成时执行。这是文档。

加载外部内容的主要 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>
于 2013-05-31T13:07:04.953 回答
1

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

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

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

或者：

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

#my-div动态内容中的某些元素在哪里。

现在，即使您只在第一次加载页面时加载脚本一次，事件处理程序也可以工作。

于 2013-05-31T00:05:57.803 回答