Question

以下是我网站正文中的一些简单的HTML行：

HTML

<h1 class="trigger">
    First Headline
</h1>
<div class="toggle_container">
    Some Lorem Ipsum here
</div>

然后我在我的标题中有这个jQuery

的jQuery

$(document).ready( function() {
    $('.trigger').not('.trigger_active').next('.toggle_container').hide();
    $('.trigger').click( function() {
        var trig = $(this);
        if ( trig.hasClass('trigger_active') ) {
            trig.next('.toggle_container').slideToggle('slow');
            trig.removeClass('trigger_active');
        } else {
            $('.trigger_active').next('.toggle_container').slideToggle('slow');
            $('.trigger_active').removeClass('trigger_active');
            trig.next('.toggle_container').slideToggle('slow');
            trig.addClass('trigger_active');
        };
        return false;
    });
});

加载网站后，HTML会更改为此并单击标题切换 'Lorem ipsum'容器。到目前为止，一切正常。

HTML

<h1 class="trigger">
     First Headline
</h1>
<div class="toggle_container" style="display: none;">
     Some Lorem Ipsum here
</div>

现在我的问题出现了：有一个网站底部的'加载更多帖子'按钮，用AJAX添加新的HTML块。

此HTML块正确显示，但它以某种方式被忽略上面的jQuery。

我在这里做错了什么？我还需要在AJAX中添加jQuery吗？如果是这样，到底在哪里？

这是AJAX代码。评论是由剧本的作者而不是我做的。

的Ajax / jQuery的

jQuery(document).ready(function($) {

    // The number of the next page to load (/page/x/).
    var pageNum = parseInt(pbd_alp.startPage) + 1;

    // The maximum number of pages the current query can return.
    var max = parseInt(pbd_alp.maxPages);

    // The link of the next page of posts.
    var nextLink = pbd_alp.nextLink;

    /**
     * Replace the traditional navigation with our own,
     * but only if there is at least one page of new posts to load.
     */
    if(pageNum <= max) {
        // Insert the "More Posts" link.
        $('#content')
            .append('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>')
            .append('<p id="pbd-alp-load-posts"><a href="#">↓ Archive</a></p>');

        // Remove the traditional navigation.
        $('.navigation').remove();
    }


    /**
     * Load new posts when the link is clicked.
     */
    $('#pbd-alp-load-posts a').click(function() {



        // Are there more posts to load?
        if(pageNum <= max) {

            // Show that we're working.
            $(this).text('...');

            $('.pbd-alp-placeholder-'+ pageNum).load(nextLink + ' .post',
                function() {
                    // Update page number and nextLink.
                    pageNum++;
                    nextLink = nextLink.replace(/\/page\/[0-9]?/, '/page/'+ pageNum);

                    // Add a new placeholder, for when user clicks again.
                    $('#pbd-alp-load-posts')
                        .before('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>')

                    // Update the button message.
                    if(pageNum <= max) {
                        $('#pbd-alp-load-posts a').text('Older entries');
                    } else {
                        $('#pbd-alp-load-posts a').text('All items loaded.');
                    }
                }
            );
        } else {
            $('#pbd-alp-load-posts a').append('.');
        }   

        return false;
    });
});

P.S。：由于我是这一切的绝对初学者，如果您可以发布一些工作代码而不是指导我或该功能，那将非常有用。谢谢。：d

Answer 1

我看到的问题是绑定事件。绑定它的方式，它只绑定到标记中当前可用的元素。

通过ajax获取html所添加的新元素不会被添加到事件处理程序中。为此，您需要将事件绑定语句修改为委托绑定：

$(document).on('click', '.trigger', function() {

});

通过Ajax加载HTML / jQuery的问题

1 个答案: