jQuery 不会在加载了 ajax 的 div 上执行答案

【问题标题】：jQuery doesn't execute on div loaded with ajaxjQuery 不会在加载了 ajax 的 div 上执行
【发布时间】：2012-12-28 03:42:55
【问题描述】：

我正在开发一个使用 PHP、MySQL、AJAX、Javascript、HTML5、css3 的网站...我想要做的是加载一个外部 html 文件并让嵌入的 Javascript 执行。

我尝试使用的 ajax 负载是这样的

<pre><code>


    $(document).ready(function(){

        $(".meny a").click(function(){
            page=$(this).attr("href");
            $.ajax({
                url: "includes/"+page,
                cache:false,
                success:function(html){
                    afficher(html);
                },

                error:function(XMLHttpRequest,textStatus,errorThrown){
                    alert(testStatus);
                }
            })

            return false;
        });
    });

    function afficher(data){
        $("#main").fadeOut(500,function(){
        $("#main").empty(); 
        $("#main").append(data);
        $("#main").fadeIn(1000);
        })
        }


</code></pre>

当直接加载页面内容时，javascript（或jQuery）功能正常，但是当在AJAX加载的另一个页面的内容中找到的div标签时，javascript（或jQuery）在这个div上不起作用，而jquery 脚本已经存储在“head”标签中。

我认为问题在于 AJAX，因为当我直接调用包含 Javascript 的页面时它工作正常。

【问题讨论】：

"..因为当我直接调用包含 Javascript 的页面时它工作正常。"您能否发布“..包含 Javascript 的页面”的内容。
我没有得到什么不适合你。当你尝试通过 ajax 加载 div 的内容时，它加载正常吗？
试试下面的链接forum.jquery.com/topic/…

标签： javascript jquery ajax dom

【解决方案1】：

@kieran 不，我从不尝试这个技巧！我想我找出了真正的问题！

jQuery 实际上会删除它在 ajax 调用中遇到的任何 javascript。他们这样做是为了防止 IE 出现问题。这是 jQuery 1.8.3 中的实际 sn-p（第 7479-7481 行）：

// inject the contents of the document in,removing the scripts 
// to avoid any 'Permission Denied' errors in IE 
.append( responseText.replace( rscript, "" ) )

在第 7291 行定义了 rscript 正则表达式：rscript = /(?:(?!)/gi, 你说得对，我必须在加载 ajax 中添加一个回调函数！

【讨论】：

【解决方案2】：

默认情况下，您通过 AJAX 检索的页面中包含的 javascript 不会被执行，因为它被视为纯文本。

您需要将文本评估为 javascript。 javascript中有一个内置函数可以实现这一点，称为eval。这是一篇关于使用 eval 和 AJAX 的好文章，感谢 technify.me。

但是我必须注意，使用eval 被认为是一种不好的做法。有一句众所周知的说法"eval is evil"，因为它的性能很差，并且可能存在 XSS 漏洞。所以你可能想看看如何在不直接使用 AJAX 调用的情况下实现类似的效果（可能是动态构建的script 标签）。但是，对于您的目的，如果响应是纯 javascript，eval 将起作用。否则，您将需要以某种方式从您的$.get 返回的 HTML 中提取 javascript。

【讨论】：

你好，首先感谢分析器......这不是我第一次听说这个解决方案（eval），我也听说过回调，触发器和 getscript.. 但我只是jQuery 的初学者，如果您可以提供一些代码来尝试使用它，将会很有帮助。并且注意到我尝试使用ajax加载的页面不包含javascript！所有 javascript 和 jQuery 都已经存储在第一页的“head”标签中！
等等什么？那你指的是什么：load an external html file and have the Javascript that is embedded execute？您提供给我们的 sn-p 是外部 javascript，并且您在 <head> 中有一个脚本标签吗？那么答案可能只是删除<code> 和<pre> 标签，因为它们用于内联脚本......
不，你不懂我！显然，所有 javascript 都像任何网页一样存储在 head 标记中，问题是 javascript 在加载 ajax 时不会在内容 html 中执行！但是如果我直接使用包含（使用 php 进行测试）加载相同的页面，则 javascript 执行......希望你能理解我糟糕的英语：/
嗯，如果显示整个页面，我认为这会容易得多。可能我想我理解你：你有一些 JavaScript 引用由 AJAX 调用加载的 HTML，当你将它包含在服务器上时它可以工作，但在动态加载时不能工作。可能头部中的javascript正在执行之前 HTML由AJAX返回？它将与 PHP 一起使用，因为它是在页面响应期间加载的，在 javascript 执行之前。也许解决方案是调用引用afficher 中的 HTML 的函数，当您保证 HTML 存在时。
是的，这正是发生的事情！所以在这种情况下，我尝试添加回调函数，但它不适用于我，我不确定我到底应该做什么！你能指出我正确的方向吗？

【解决方案3】：

使用

 $(".meny a").on( 'click', ...

而不是

 $(".meny a").click( ....

$(".meny a") 现在可以点击了

【讨论】：

click 的含义与绑定click 事件相同。问题是如何执行来自 ajax 调用的 HTML 响应中包含的 javascript（答案是使用 eval 或等效项）。
我以前用过它，但它不起作用我什至尝试这样 $(document).on('click',"a.shortcut", function(){ 它不起作用://