jQuery .on（）在加载不同内容后无法工作

如果您转到http://www.elemovements.com并尝试单击第一篇文章中的“阅读更多......”，它将与单击存档中的同一链接一起工作。这一切都由这个代码块来处理......这很麻烦，是的，但我一直在努力想办法做到这一点。jQuery .on（）在加载不同内容后无法工作

(function() { 

    var $Body = $("#news .inner"); 
    var $Title = $("#news .title"); 

    var strNewsURL = "<?=URL_NEWS?>"; 

    $(document).on("click", "a:contains(Read More...)", function(event) { 

     var strOld = $Body.html(); 
     var strURL = $(this).attr("href").replace("index.php", strNewsURL); 

     //var strBackURL = strURL.match(/archive.php/) ? "archive.php?xnewsaction=getnews&newsarch=" + getURLVars(strURL)['newsarch'] : strNewsURL; 

     $Body.slideUp(100); 

     $.get(

      strURL, 

      objNHF, 

      function(strData) { 

       $Body.html(strData + '<a class="back"><?=TEXT_BACK?></a>').slideDown(1000, "easeOutBounce"); 

       $(document).on("click", "#news a.back", function(event) { 

        $Body.slideUp(100, function() { 

         $(this).html(strOld); 

        }).slideDown(1000, "easeOutBounce");; 

        event.preventDefault(); 

       }); 

      } 

     ); 

     track(strURL); 

     event.preventDefault(); 

    }); 

})();

如果尝试加载其他页面（比方说，“联系方式”），然后点击“首页”再次触发该事件，但没有内容加载到股利。我在这里做错了什么？非常令人费解。

来源

2012-01-30 Gabriel Ryan Nahmias

这些变量的on/live点击之外声明。加载新内容时，这些元素将被替换，并且变量指向旧副本。

var $Body = $("#news .inner"); 
var $Title = $("#news .title");

移动点击所以他们每次刷新里面这些变量：

$(document).on("click", "a:contains(Read More...)", function(event) { 

    var $Body = $("#news .inner"); 
    var $Title = $("#news .title"); 
...

来源

2012-01-31 01:46:33

**我只是试图在同一时间发布！**哈哈。不幸的是，我的名声不允许我回答我自己的问题，所以，为你而忙。不管怎么说，还是要谢谢你。 – 2012-01-31 02:25:26

但是，我也遇到了一个新问题（唉）。不是用户会这样做，但如果您多次点击“阅读更多...”，并在第二次或更高的运行时点击“<<返回”，内容会减少您曾经去过的次数。事件肯定会越来越激烈。任何人？ – 2012-01-31 02:30:22

啊，这是因为'a.back'处理程序应该是一个简单的'click（）'，而不是'on（）'。感谢大家。 – 2012-01-31 02:44:35

我不认为你可以使用伪选择器的委托事件处理程序。为了解决这个问题只需要使用HTML结构链接周围，你的优势：

$(document).on('click', '.more a', function() {...});

这是一个好主意，反正因为:contains伪选择是相当缓慢。 a:contains(Read More...)必须遍历页面上的每个链接，并获取它的文本进行检查。

来源

2012-01-30 23:20:05 Jasper

什么是令人费解的是它在第一次运行正常，但如果我改变同一div的内容，其中#news DIV是，然后重新加载#news div，它不会工作。 – 2012-01-30 23:22:44

我只是尝试在该类名称的链接上添加一个范围，附加事件，但仍然遇到同样的问题。虽然我同意这种方法更合乎逻辑，但是我插入了一个新闻系统，并且我不想通过数千行代码修改其HTML。无论如何，这只是一个原型，因为它是此网站上此类链接的第一个实例。 – 2012-01-30 23:27:58

你的选择是空

http://jsfiddle.net/qRWa5/21/

来源

2012-01-31 00:30:53 Fresheyeball

如果他/她使用'on（）'，那么他/她使用的是jQuery 1.7+，其中'live（）'的版本已被弃用（推荐使用'on（）'）。在版本1.7之前''delegate（）'是首选的。 – 2012-01-31 00:39:49

好点。但on（）没有按预期工作，而live（）会。 – Fresheyeball 2012-01-31 00:41:39

我试过live（），但似乎失败了。它看起来好像on（）取代了live（）？这里是一个jsFiddle来演示相同的想法：http://jsfiddle.net/grn2012/qRWa5/20/ – 2012-01-31 00:43:12

jQuery .on（）在加载不同内容后无法工作

回答

相关问题