Question

有没有人知道jquery .load（）解决从外部内容加载的脚本标签的问题？

有很多文件证明这种情况发生了，但是经过4个小时搜索网后，我找不到合适的工作？

我正在加载动态生成的div - 类似于搜索结果页面 - 并且需要将.click（）绑定到每个动态生成的div中的元素。我有一个执行html生成工作的php文件并将所有html作为字符串返回但是我无法绑定jquery .click（），因为包含jquery函数的脚本标记被剥离了。

这是通过调用php文件加载外部内容的代码......

$("#titles_wrap").load("m_scripts/m_php/titles_loader.php", function(){
                                                                $..some code
                                                                });

这里是生成div的php文件的循环（这很好用）......

$tag1='<script type="text/javascript">';
$tag2='</script>';

while($result_array = mysql_fetch_array($result)) {

            if($i2<=($titles_total)){

                $_SESSION['titles_string'] .= '<li id="listItem_'.$i2.'">

                                                <div id="titles_list_item">

                                                    <div id="titles_list_image_box" style="background-image: url(../../images/thumbs_test/'.$result_array[0].'); background-repeat: no-repeat; ">'.($i2+1).'</div>
                                                    <div id="title_php_loader"></div>
                                                        <div id="title_info_wrap">

                                                        <div id="title_current"><span class="title_current_grey" >current title: </span><br>'.$result_array[1].'
                                                            </div>

                                                                <div id="title_form_wrap">
                                                                    <span class="title_current_grey" >new title: </span><br><input name="title_input_'.$i2.'" id="title_input_'.$i2.'" type="text" class="title_input"></input>
                                                                    <div id="title_send" class="title_send_'.$i2.'">GO</div>
                                                                </div>

                                                            </div>


                                                    '.$tag1.'
                                                    $(".title_send_'.$i2.'").click(function(){$("#title_php_loader").load("m_scripts/m_php/title_sender.php")})
                                                    '.$tag2.'

                                                </div>
                                            </li>';
                $i2++;
                                }
            }

很抱歉，如果第二个代码块有点“矫枉过正” - 让我知道简化的摘录是否会更有用。也就是说，你可以在php代码的最后一行的第8行看到应该用动态分配的选择器写入每个div的jquery函数。

当然，可能是代码中还有其他错误，但是我不能测试它，直到我能让.load（）停止捣乱它！

如果有人找到了解决方案 - 甚至是有限恩典的解决方案 - 那就太棒了！

提前致谢，

干杯，

斯科特

编辑 - 编辑 - 编辑 - 编辑 - 编辑 - 编辑 - 编辑 - 编辑

@ T.J。克劳德 @Frug

感谢您的帮助！

我刚刚仔细查看了演示中涉及的页面，是的，我看到你已经开始工作了。看起来很惊人 - 那些脚本标签，那里有很多人无法让它工作 - 不幸的是我就是其中之一！

我在演示和代码情况之间看到的唯一区别是

1）开场脚本标签中没有类型声明，

2）你正在加载一个带有脚本标签的页面作为DOM的一部分，而我正在加载php字符串输出（我真的不认为这很重要'，呃？当它击中客户端时它全部来到同一个地方，不是吗？）

3），你的.load调用正在获取整个页面，而我的只返回元素。我已经改变了输出字符串以包含所有和标签，但grrrrrr ...我仍然无法得到dem该死的脚本标签显示在DOM中。

有什么建议吗？我不知道有什么负荷可能是什么！谢谢S

Answer 1

立即更新，您可以在jQuery doc网站上找到：

http://api.jquery.com/load/

只有在使用特定后缀选择器调用load时才会剥离标签。

脚本执行

使用不带后缀选择器表达式的URL调用.load（）时，在删除脚本之前将内容传递给.html（）。这将在丢弃之前执行脚本块。但是，如果使用附加到URL的选择器表达式调用.load（），则在更新DOM之前会删除脚本，因此不会执行脚本。两种情况的例子如下所示：

此处，作为文档一部分加载到#a中的任何JavaScript都将成功执行。 1

$('#a').load('article.html');

但是，在下列情况下，加载到#b的文档中的脚本块将被删除而不执行： 1

$('#b').load('article.html #target');

Answer 2

这个帖子现在有点老了，但是我找到了$.load +选择器+ <script>问题/功能的解决方法，我想分享一下。也许这对某人有帮助。而不是$.load，我使用它：

$.ajax({
    url: '/some/url',
    success: function(html) {
        var content = $('<div />').html(html).find('#my-custom-selector');
        $('#container-to-place-html-in').html(content);
    }
});

干杯，亚历克斯

Answer 3

jQuery load 删除脚本代码（example），内容中没有脚本代码从PHP脚本返回。有一些JavaScript，但它没有正确嵌入script标签中，因此浏览器无法识别它。

如果你想要这个JavaScript：

...
'.$tag1.'
$(".title_send_'.$i2.'").click(function(){$("#title_php_loader").load("m_scripts/m_php/title_sender.php")})
'.$tag2.'
...

被识别为JavaScript，将其放在script标记中。

...
'.$tag1.'
<script>"$(".title_send_'.$i2.'").click(function(){$("#title_php_loader").load("m_scripts/m_php/title_sender.php")})</script>
'.$tag2.'
...

...或者更好的是，在内容的末尾使用一个script标记来挂钩，或者在load函数上使用回调。

更新：重新编辑：

1）开场脚本标签中没有类型声明，

无所谓，请参阅this updated example。浏览器根据它始终适用的相同规则解释script标记。

2）你正在加载一个带有脚本标签的页面作为DOM的一部分，而我正在加载php字符串输出（我真的不认为这很重要'，呃？当它击中客户端时它全部来到同一个地方，不是吗？）

是的，一旦它到达浏览器，它们都会出现同样的事情。

3），你的.load调用正在获取整个页面，而我的只返回元素。我已经改变了输出字符串以包含所有和标签但是grrrrrr ...我仍然无法获得dem该死的脚本标签以显示在DOM中。

我的例子只是加载一个代码段，而不是整页。

我不知道你为什么不工作。我想知道它是否与在循环中输出的多个脚本元素有关，或者是你正在连接click处理程序，而是it's not either of those。

没有什么可以做的，但要采取你的非工作示例并逐渐剥离层，直到找到该部分，当你删除它时，让它开始工作。从根本上说，使用load使用load 不会使脚本不起作用（无论你认为有多少人认为是这种情况;这是一个很大的世界，有很多人几乎想想什么）。你必须放弃这个与jQuery的{{1}}函数相关的想法，这些函数对脚本做了任何事情;它可能不是。

调试此类事情的关键是简化，简化，简化。确保服务器为ajax调用返回的HTML看起来像你认为的那样（没有奇怪的引号或其他东西）。尝试使用静态页面。等

Answer 4

您能否确认是否正在删除脚本或事件绑定不起作用？但是，我认为你可以稍微改变一下这个方法。首先修改你的脚本，如

$("#titles_wrap").load("m_scripts/m_php/titles_loader.php", function(){
                                                                $..some code
                                                                $("[class^='title_send_']").click(function(){$("#title_php_loader").load("m_scripts/m_php/title_sender.php")});
                                                                });

然后从php代码中删除脚本部分

while($result_array = mysql_fetch_array($result)) {

            if($i2<=($titles_total)){

                $_SESSION['titles_string'] .= '<li id="listItem_'.$i2.'">

                                                <div id="titles_list_item">

                                                    <div id="titles_list_image_box" style="background-image: url(../../images/thumbs_test/'.$result_array[0].'); background-repeat: no-repeat; ">'.($i2+1).'</div>
                                                    <div id="title_php_loader"></div>
                                                        <div id="title_info_wrap">

                                                        <div id="title_current"><span class="title_current_grey" >current title: </span><br>'.$result_array[1].'
                                                            </div>

                                                                <div id="title_form_wrap">
                                                                    <span class="title_current_grey" >new title: </span><br><input name="title_input_'.$i2.'" id="title_input_'.$i2.'" type="text" class="title_input"></input>
                                                                    <div id="title_send" class="title_send_'.$i2.'">GO</div>
                                                                </div>

                                                            </div>
                                                </div>
                                            </li>';
                $i2++;
                                }
            }

Answer 5

为什么不能使用回调函数绑定事件而不是在php页面上内联它？

可能有办法解决这个问题，但我不会在第一时间内联系它，这就是为什么你没有找到其他人这样做的原因。如果你在回调中加入绑定，它们会在加载后附加。

Answer 6

我知道这很糟糕但是你可以做的一件事就是在你正在加载的html中写一些东西然后在回调中的.ajax或.load方法做一个字符串替换 - ＆gt; html = html.replace（/ lscript / g，'script'）;

这样的事情应该将标签作为未经执行的标签。

希望有所帮助：）

jquery load（）剥离脚本标签 - 解决方法？

6 个答案: