使用jquery加载新的零件时,JavaScript的不工作的新零件和HTML 5 [英] javascript not working in the new part when loading a new part using jquery and HTML 5

查看:115
本文介绍了使用jquery加载新的零件时,JavaScript的不工作的新零件和HTML 5的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

你好我的标题提示,我用下面的code动态加载的页面(在这里留下ID)

的一部分

 函数callBackFunctionLoadNextBackInPage(数据)
{
    //警报(数据);
    $(#左)fadeTo(100,1)。
    VAR数据= $(数据).find('#left');
    $(#左)HTML(数据)。
    如果(supports_history_api())
    {
        history.pushState(NULL,NULL,loadNextBackInPage_URL);
        如果(!popEventListnerAdded){
            window.addEventListener(popstate功能(E){
            loadNextBackInPage(location.href);
            },假);
            popEventListnerAdded = TRUE;
        }

    }
    其他
    {

    }
}
功能loadNextBackInPage(URL,PARM)
{
    //警报(URL);
    loadNextBackInPage_URL =网址;
    $(#左)fadeTo(100 .2)。
    $。员额(URL,PARM,callBackFunctionLoadNextBackInPage,HTML);
}
 

下面是我怎么办呢为例(点击查看详细链接

但问题是:

它加载正确的......但JavaScript是不工作。例如:1。我使用注释的讨论和它不负载在下一节

  

添加使用Facebook的评论,微博,雅虎,DISQUS,OpenID的或Anonymus

但是,如果您刷新浏览器,它不正确加载...我加载所需的所有脚本首只......那么,为什么不工作?

此外,例如:共享(点击此处)按钮,应使用下列code扩展:

 < SCRIPT LANGUAGE =JavaScript的类型=文/ JavaScript的>
功能showHideDiv()
{
    VAR divstyle =新的String();
    。divstyle =的document.getElementById(股份)的style.display;
    如果(divstyle.toLowerCase()==块|| divstyle ==)
    {
        。的document.getElementById(股份)的style.display =无;
    }
    其他
    {
        。的document.getElementById(股份)的style.display =块;
    }
}
< / SCRIPT>
 

但它亘古不变的!...但工作如果我刷新页面(即再次加载URL)

主要是我想讨论讲评工作的事情。我用下面的codeS产生的呢

 < D​​IV CLASS =项>
  < H2>添加使用的Facebook,Twitter的,雅虎,DISQUS,OpenID的或Anonymus℃的评论; / H>
  &其中p为H.;


  < D​​IV ID =disqus_thread>< / DIV>
<脚本>
    / * * *配置变量:编辑之前粘贴到你的网页* * * /
    VAR disqus_shortname ='[写到这里]; //要求:更换例如您的论坛短名称

    //下面是强烈建议其他参数。在前面使用删除斜线。
     VAR disqus_identifier =页面= show_song_details.php和放大器; songid =< PHP的echo $ SID>&安培; N = 0&放大器;返回=没有;
     VAR disqus_url ='<?PHP的echo $ main_root $ _ SERVER ['REQUEST_URI']; ?>';
    变种disqus_developer = 1;
    / * * *勿编辑这条线之下* * * /
    (功能() {
        VAR DSQ = document.createElement方法(脚本); dsq.type =文/ JavaScript的; dsq.async = TRUE;
        dsq.src =HTTP://+ disqus_shortname +.disqus.com / embed.js;
        (document.getElementsByTagName('头')[0] || document.getElementsByTagName('身体')[0])的appendChild(DSQ)。
    })();
< / SCRIPT>
< NOSCRIPT>请启用JavaScript来查看的< A HREF =htt​​p://disqus.com/?ref_noscript>评论由Disqus< / A>< / NOSCRIPT>

  &所述; / P>


< / DIV>
 

解决方案

问题是,jQuery的剔除了<脚本> 每当你从创建一个jQuery对象标签HTML字符串做一些DOM操作就可以了,你的情况 .find()

您最好的办法是阅读整个HTML文本,然后使用普通EX pressions砍它,并把相关的部分到文档中。你还应该考虑重新设计项目的一部分,因为在我看来,装载有部分脚本的外部页的部分是不是一个好的做法,可能是很难在长期内保持。当然,除非它是你得有深思熟虑的模块化设计,你知道你在做什么。

这个问题是一个不同的线程完全相同的副本,但我不能投票将其关闭,由于赏金。看看我的答案在这里,看看是否有帮助:<一href="http://stackoverflow.com/questions/5791420/jquery-keep-script-tag-after-find/5792518#5792518">jquery:保持&LT;脚本&GT; .find后标记()

Hi as my title suggest, i use the following code to dynamically load a portion of the page (here left 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');
}

Here is an example of how i do it (click on the show details link

Problem is:

It loads properly... but the javascript is not working. For example: 1. I use a discuss for comments and it doesnt load in the following section

Add a Comment using Facebook, Twitter, Yahoo!, DISQUS, OpenID or Anonymus

But if you refresh the browser it does load properly... I am loading all the scripts required first only... so why is it not working?

Also for example: The SHARE (Click here) button should expand using the following code:

<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> 

But it doesnot!... but works if i refresh the page(i.e load the url again)

Mainly i want the discuss commenting thing to work. I use the following codes to generate it

<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>

解决方案

The problem is that jQuery strips out <script> tags whenever you create a jQuery object from a HTML string to do some DOM manipulations on it, in your case .find().

Your best bet is to read the whole HTML as text, then use regular expressions to chop it up and put the relevant part into your document. You should also think about redesigning part of your project, as in my opinion loading parts of an external page with partial scripts is not a good practice and could be hard to maintain in the long term. Unless of course it's a well thought out modular design you've got there and you know what you're doing.

This issue is an exact duplicate of a different thread, although I can't vote to close it due to the bounty. Have a look at my answer here and see if it helps: jquery: Keep <script> tag after .find()

这篇关于使用jquery加载新的零件时,JavaScript的不工作的新零件和HTML 5的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆