Question

我有这些 HTML 行

<h1 class="trigger">HEADLINE ONE</h1>
<div class="toggle_container">
    BODY TEXT ONE
</div>

以及我网站<head>部分中的 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;
    });
});

加载页面并应用jQuery代码后，我的 HTML 输出如下所示：

<h1 class="trigger">HEADLINE ONE</h1>
<div class="toggle_container" style="display: none;">
     BODY TEXT ONE
</div>

到目前为止一切正常。但是我的问题出现了：当我用AJAX加载一个新的 HTML 块时 - 看起来像这样：

<h1 class="trigger">HEADLINE TWO</h1>
<div class="toggle_container">
    BODY TEXT TWO
</div>

...它不会使用上面的jQuery代码呈现。那么如何将jQuery代码应用于这个新加载的HTML块？

编辑：这是AJAX

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

Answer 1

将ajax内容成功附加到DOM后，您希望再次运行以下代码：

$('.trigger').not('.trigger_active').next('.toggle_container').hide();

然后，您要确保使用事件委派，以便点击也可以处理动态插入的内容：

$(document).on('click', '.trigger', function() {
    //the rest of your code
});

Answer 2

当您使用AJAX加载部分html时，您的头部javascript将无法执行。

潜在解决方案

头上有以下脚本

function init(){
$('.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;
    });
}

$(document).ready( function() {
    init();
});

在AJAX加载的HTML中应该看起来像这样

<h1 class="trigger">HEADLINE TWO</h1>
<div class="toggle_container">
    BODY TEXT TWO
</div>
<script>init();</script>

将jQuery代码应用于AJAX加载的内容

2 个答案: