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脚本仍然不会阻止表单在用户单击提交按钮时提交或发送帖子请求。我已将两个脚本放在正在加载$.get

的内容之外

Answer 1

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

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

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

如果您能为服务器找出一种方法来确定它不需要返回一个完整的页面，那么它可能会更顺畅。无论如何它会让事情变得更快;当你只打算使用它的一部分时，没有必要提供一个完整的页面。

Answer 2

问题是提交按钮是动态加载的内容，我需要使用live（）。 $("#submit").live("click", function(e){})

通过.load（）加载的脚本失败

2 个答案: