javascript - 通过 .load() 加载的脚本失败

Question

我正在使用 .load() 加载联系人页面，其中包含如下所示的脚本:

<script type="text/javascript">

    $('#submit').click(function(e){
        e.preventDefault();
        var name = $('#name').val();
        var email = $('#email').val();
        var message = $('#message').val();
        $.post("<?php echo bloginfo( 'template_directory' ) . '/inc/mailit.php';?>", 
            {
                name: name,
                email: email,
                message: message
            },
            function(data) {
                var n = data.indexOf('<span class="success_message">');
                if (n !== 0) {
                    $('#message_box_1').empty().append(data);
                } else {
                    $('#contact_form').empty().append(data);
                }
            }
        );
    });
</script>

当我直接加载联系人页面(即转到 http://example.com/contact-us)时脚本工作正常，但当我将表单和脚本加载到使用 .load() 的 dom。当我单击 #submit 时，表单会在不运行脚本的情况下提交。知道发生了什么事吗？

哦，加载脚本如下所示:

<script>
$('#top_links a').click(function (e) {
    e.preventDefault();
    var link = $(this).attr('href');
    $('#content').empty();

    $('#content').load(link + ' #content > *');


});
</script>

更新:

感谢@pointy 指出.load() 的问题。所以现在我修改了我的代码以使用 $.get :

<script>
$('#top_links a').click(function (e) {
    e.preventDefault();
    var link = $(this).attr('href');
    $('#content').empty();


    $.get(link, { }, 
        function(data) {
            $('#content').replaceWith($(data).find("#content"));
        }
    )
});
</script>

问题是一样的，当用户点击提交按钮时，上面的 AJAX 脚本仍然没有阻止表单提交或发送 post 请求。我已将这两个脚本放置在使用 $.get

加载的内容之外

Answer 1

当您使用 .load() 加载并像您一样在 URL 后使用选择器时，jQuery 不会在加载的内容中运行任何脚本。它明确地将它们剥离并丢弃。

我认为它这样做的主要原因是，因为它丢弃了已加载页面的某些部分，所以它不知道所选内容中的嵌入式脚本是否可以在页面上没有其他 JavaScript 的情况下工作未选中。

编辑 — 不幸的是，您的替代代码会遇到同样的问题。问题是 $(data) 涉及将返回的页面 HTML 转换为文档片段。在 jQuery 内部，将通过一个名为“clean”的函数去除脚本。它确实保存了它们，但是在 $(data) 函数调用返回时它们被丢弃了。

如果您能想出一种方法让您的服务器 完成确定它不必返回完整页面的工作，它可能会更顺畅。无论如何，它会让事情变得更快；如果您打算只使用其中的一部分，那么发送完整的页面是没有意义的。