jQuery循环仅执行一次

Question

我遇到了一个小问题，涉及到我构建的一个循环。这是我第一次尝试使用jQuery构建循环。它是一个简单的“阅读更多/收起”按钮。

我遇到的问题很奇怪。当页面第一次加载时，它完美地工作，但在此之后的任何时间，它都会忽略ID的变化而运行整个过程。

HTML：

<div class="inner_container" id="tag_info"><?php?></div>
<a id="read_more">read more ></a>

jQuery:

$('a#read_more').click(function() {
    $('#tag_info').stop().animate({
        height: '100%'
        }, 500 );
    $(this).text('< read less');
    $(this).removeAttr('id');
    $(this).attr('id', 'read_less');
        $('a#read_less').click(function() {
            $('#tag_info').stop().animate({
                height: '50px'
                }, 500 );
            $(this).text('read more >');
            $(this).removeAttr('id');
            $(this).attr('id', 'read_more');
        });
});

CSS: [不需要锚点样式]

#tag_info {
height: 50px;
overflow: hidden;
}

任何时候（第一次之后），div都会立即动画到第一个点击函数中设置的高度，然后跳回到第二个点击函数中设置的高度。如果我将它们分成两个不同的点击函数，则第二个函数无法正常工作。最令人困惑的是，它可以运行一次，然后无法正常工作。有什么建议吗？

- user2265712

---

你不应该在jquery选择器的ID前面使用任何东西（例如：$('a#read_more') 应该改为 $('#read_more')），这样会更有效率。 - Samuel R

你指的是哪个循环？在示例中没有任何一个。 - Ron van der Heijden

绑定事件处理程序后更改ID不会更改事件处理程序或其绑定的元素。 - adeneo

谢谢你的提示。严格来说，这不是一个循环。但是代码第一次执行得很好。 - user2265712

Answer 1

如果您想动态更改ID，请使用事件委托。

$('body').on('click','#read_more',function() {
    $('#tag_info').stop().animate({
        height: '100%'
    }, 500 );
    $(this).text('< read less').attr('id', 'read_less');
});

$('body').on('click','#read_less',function() {
    $('#tag_info').stop().animate({
         height: '50px'
     }, 500 );
     $(this).text('read more >').attr('id', 'read_more');
});

通过委托，您将绑定到在绑定发生时存在于DOM中的静态父元素。它将处理从您的动态ID冒泡上来的事件。

直接和委托事件

- wirey00

Answer 2

一个简单的切换功能应该就足够了：

$('#read_more').on('click', function() {
    var state = $(this).text() == 'read more >';
    $('#tag_info').stop().animate({
        height: (state ? '100%' : '50px')}, 500 );
    $(this).text(state ?'< read less' : 'read more >');
});

作为一个附注，使用百分比和像素单位同时进行动画操作有时可能会出现问题。 FIDDLE

- adeneo

Answer 3

我认为当您将事件绑定到元素时，该事件会绑定到该特定元素，无论您稍后是否更改其ID。

请将其重写为切换或使用jQuery的on与事件委托：http://api.jquery.com/on/。

- Jason P

Answer 4

Change your script as follows:

$('a#read_more').live("click",function() {
    $('#tag_info').stop().animate({
        height: '100%'
        }, 500 );
    $(this).text('< read less');
    $(this).removeAttr('id');
    $(this).attr('id', 'read_less');
        $('a#read_less').live("click",function() {
            $('#tag_info').stop().animate({
                height: '50px'
                }, 500 );
            $(this).text('read more >');
            $(this).removeAttr('id');
            $(this).attr('id', 'read_more');
        });
});

- karthi

Answer 5

您正在将另一个处理程序添加到相同元素的单击处理程序中，这是导致问题的原因。

$('a#read_less').click(function () {
    $('#tag_info').stop().animate({
        height: '50px'
    }, 500);
    $(this).text('read more >');
    $(this).removeAttr('id');
    $(this).attr('id', 'read_more');
});

试试这个（http://jsfiddle.net/balintbako/nc5Dp/）：

$('#read_more').click(function () {
    if ($(this).hasClass("more")) {
        $('#tag_info').stop().animate({
            height: '100%'
        }, 500);
        $(this).text('< read less');
    } else {
        $('#tag_info').stop().animate({
            height: '50px'
        }, 500);
        $(this).text('read more >');
    }
    $(this).toggleClass("more");
});

- Balint Bako