1

我正在加载一个.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(). 当我单击#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 Script 仍然没有阻止表单提交或发送 post 请求。我已将两个脚本放在正在加载的内容之外$.get

4

2 回答 2

2

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

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

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

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

于 2012-07-03T23:24:53.790 回答
0

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

于 2012-07-04T03:49:13.410 回答