脚本通过.load()加载失败脚本、加载、load

2023-09-10 21:04:03 作者:ン何以述情

林加载使用接触页 .load(),其中包含一个脚本,如下所示:

Im loading a contact page using .load() which contains a script that looks like this:

<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 ),但它不是我加载的形式和脚本到使用DOM .load()。当我点击 #submit ,表单提交,但不运行脚本。任何想法是怎么回事?

The script works fine when I load the contact page directly (i.e. go to http://example.com/contact-us) but it doesn't when I load the form and script into the dom using .load(). When I click #submit, the form submits without running the script. Any ideas what is going on?

呵呵,负载脚本是这样的:

Oh and the load script looks like this:

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

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


});
</script>

更新:

感谢@pointy您指出了存在的问题与 .load()。所以,现在我已经修改了我的code使用 $获得

Thanks to @pointy for pointing out the problems with .load(). So now I have modified my code to use $.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脚本上面仍然没有prevent从提交或发送POST请求,当用户点击提交按钮的形式。我把两个脚本的加载与 $的内容之外,获得

推荐答案

在与加载.load()和使用的URL后,选择喜欢你正在做的,jQuery的根本不运行加载的内容的脚本。它明确地剥离出来,并引发他们离开。

When you load with .load() and use a selector after the URL like you're doing, jQuery simply does not run any scripts in the loaded content. It explicitly strips them out and throws them away.

我觉得它这样做的主要原因是,由于它扔掉这就是被加载的网页的某一部分,它已经不知道该嵌入的脚本是所选择的内容中是否会工作,没有其他的JavaScript的网页的上没有的选择。

I think the main reason it does this is that, since it's throwing away some portion of the page that's been loaded, it has no idea whether the embedded scripts that are inside the selected content will work without other JavaScript on the page that's not selected.

修改的&mdash;很遗憾,您的替代code将遭遇同样的问题。问题是, $(数据)包括将返回的HTML页面到文档片段。也就是说,内部jQuery的,会经过一个所谓的干净的功能,它删除了脚本。它确实救他们,但他们的时候扔掉了 $(数据)函数调用返回。

edit — unfortunately your substitute code will suffer from the same problem. The issue is that $(data) involves converting the returned page HTML into a document fragment. That, internal to jQuery, will go through a function called "clean" that strips out the scripts. It does save them, but they're thrown away by the time that the $(data) function call returns.

它可能会是顺畅了很多,如果你能想出办法为你的服务器的做搞清楚,它并没有返回一个完整的网页的工作。这会让事情更快呢;有没有点发货,当你打算只使用其中的一部分一个完整的页面。

It's probably going to be a lot smoother if you can figure out a way for your server to do the work of figuring out that it doesn't have to return a complete page. It'll make things faster anyway; there's no point shipping a complete page when you're going to only use a portion of it.

 
精彩推荐
图片推荐