使用 jquery 和 HTML 5 加载新部件时，javascript 在新部件中不起作用

Question

正如我的标题所暗示的，我使用以下代码动态加载页面的一部分（此处为左侧 id）

function callBackFunctionLoadNextBackInPage(data)
{
    //alert(data);
    $("#left").fadeTo(100,1);
    var data = $(data).find( '#left' );
    $("#left").html(data);
    if(supports_history_api())
    {
        history.pushState(null, null, loadNextBackInPage_URL);  
        if(!popEventListnerAdded) {
            window.addEventListener("popstate", function(e) {
            loadNextBackInPage(location.href);
            },false);
            popEventListnerAdded = true;
        }

    }
    else
    {

    }
}
function loadNextBackInPage(url,parm)
{
    //alert(url);
    loadNextBackInPage_URL = url;
    $("#left").fadeTo(100,.2);
    $.post(url,parm,callBackFunctionLoadNextBackInPage,'html');
}

这里是an example of how i do it（点击显示详情链接

问题是：

它可以正常加载...但是 javascript 无法正常工作。例如： 1. 我对 cme​​ts 使用了讨论，但它不会在以下部分中加载

使用 Facebook、Twitter、Yahoo!、DISQUS、OpenID 或 Anonymus 添加评论

但是，如果您刷新浏览器，它确实可以正常加载...我只加载了所有需要的脚本...那为什么它不起作用？

另外例如：SHARE（单击此处）按钮应使用以下代码展开：

<script language="javascript" type="text/javascript">
function showHideDiv()
{
    var divstyle = new String();
    divstyle = document.getElementById("share").style.display;
    if(divstyle.toLowerCase()=="block" || divstyle == "")
    {
        document.getElementById("share").style.display = 'none';
    }
    else
    {
        document.getElementById("share").style.display = 'block';
    }
}
</script> 

但它没有！...但如果我刷新页面（即再次加载 url）就可以工作

主要是我希望讨论评论的事情起作用。我使用以下代码生成它

<div class="entry">
  <h2>Add a Comment using Facebook, Twitter, Yahoo!, DISQUS, OpenID or Anonymus </h2>
  <p>


  <div id="disqus_thread"></div>
<script>
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = '[written here]'; // required: replace example with your forum shortname

    // The following are highly recommended additional parameters. Remove the slashes in front to use.
     var disqus_identifier = 'page=show_song_details.php&songid=<?php echo $sid ?>&n=0&back=no';
     var disqus_url = '<?php echo $main_root.$_SERVER['REQUEST_URI']; ?>';
    var disqus_developer = 1 ;
    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

  </p>


</div>

Answer 1

问题是，当您从 HTML 字符串创建 jQuery 对象以对其进行一些 DOM 操作时，jQuery 会去除 <script> 标记，在您的情况下为 .find()。

最好的办法是将整个 HTML 作为文本阅读，然后使用正则表达式将其切碎并将相关部分放入文档中。您还应该考虑重新设计项目的一部分，因为在我看来，使用部分脚本加载外部页面的部分不是一个好的做法，并且从长远来看可能难以维护。当然，除非这是一个经过深思熟虑的模块化设计，并且您知道自己在做什么。

这个问题与另一个线程完全相同，尽管由于赏金，我无法投票关闭它。看看我的回答，看看是否有帮助：jquery: Keep <script> tag after .find()

Answer 2

我认为问题在于您的事件触发的顺序。当您正常加载页面时，最有可能在load 触发时运行讨论js。因此，当您使用 ajax 加载时，它不会触发 load 事件。相反，您必须在 callBackFunctionLoadNextBackInPage 方法中初始化这些组件或使用另一个回调。

$.post(url,parm,function(data) {
    callBackFunctionLoadNextBackInPage(data);

    // Initialize here
    $('.element').plugin_initializer();

},'html');

Answer 3

showHideDiv()功能在主页面（列表）不可用，仅在子页面（单曲）可用。 在以下代码中，您仅检索页面 dom 的子集，这意味着您在页面其余部分创建的 JS 函数不会运行。

$("#left").fadeTo(100,1);
var data = $(data).find( '#left' );
$("#left").html(data);

您可以通过在主页中包含所需的 JS 函数来解决此问题。

我多年前读到的一个可能的解决方案是将函数分配给一个变量，如下所示：

var showHideDiv = function() {...};

这让我觉得有点脏……但是在 data 上运行一个 eval 怎么样。比如：

$("#left").fadeTo(100,1);
var data = $(data).find( '#left' );
$("#left").html(data);

data.find('script').each(function() {
  eval($(this).text());
});

编辑：也许你可以试试jQuery的globalEval函数。

$("#left").fadeTo(100,1);
var data = $(data).find( '#left' );
$("#left").html(data);

data.find('script').each(function() {
  $.globalEval($(this).text());
});

Answer 4

尝试用 jquery live() 替换 onclick，看看它是否有效。您的 showHideDiv 也可以减少为一行：

$("#share").toggle()