Question

如果您转到http://www.elemovements.com并尝试点击第一篇文章中的“阅读更多...”，它将会起作用，如果您单击存档中的相同链接。这一切都由这段代码处理......它很混乱，是的，但我一直试图想出各种方法。

( 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();

    } );

} )();

如果你尝试加载另一个页面（比方说，“联系”），然后再次单击“主页”，事件将触发，但不会将内容加载到div中。我在这做错了什么？非常令人费解。

Answer 1

这些变量是在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");
...

Answer 2

我认为您不能将伪选择器用于委托事件处理程序。要解决此问题，只需使用链接周围的HTML结构即可：

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

无论如何，这是一个好主意，因为:contains伪选择器非常慢。 a:contains(Read More...)必须遍历页面上的每个链接并获取要检查的文本。

Answer 3

您的选择器为空

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

jQuery .on（）在加载不同内容后不起作用

3 个答案: