代码之家 › 专栏 › 技术社区 › tomsseisums

.click()事件未执行

jquery javascript

tomsseisums · 技术社区 · 15 年前

http://jsfiddle.net/M6xdq/

我想要实现的是-当用户单击“阅读更多”链接时:

它被移走了
将其标签更改为“少读”
这个新的“无读”链接被添加到它的父元素(readmore-holder)的下一个元素中。
显示“readmore_holder”;

然后应该有另一部分用“少读”来交换链接并隐藏 readmore_holder 但是因为我连 alert() 为了露面,我有点迷路了。

这里有什么问题?

另外,如果有办法简化这段代码,我会非常感激的。

事先谢谢!

编辑: JSfiddle示例中的代码。

$('.readmore_holder').hide();
$('.readmore_holder').prev().append(' <a href="javascript:void(0);" class="toggleon">read-more</a>');

$('.toggleon').click(function() {     
    $(this).parent().next().append(' <a href="javascript:void(0);" class="toggleoff">read-less</a>');
    $(this).parent().next().fadeIn();        
    $(this).remove();        
});

$('.toggleoff').click(function() {
    alert('works!');
});â

HTML

<p>Headline is right here</p>
<p class="readmore_holder">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget suscipit ante. Pellentesque egestas varius dolor, sit amet blandit erat luctus quis. Nunc semper odio a orci vulputate ut pulvinar mi consequat. Praesent molestie accumsan velit, nec vehicula velit mattis vitae. Proin libero mauris, ultrices eu congue quis, sollicitudin et eros. Phasellus tortor mauris, imperdiet in euismod ut, tempor id ante.</p>â

5 回复 | 直到 15 年前

Sarfraz 15 年前

你需要使用 live() 动态生成内容的方法。 See the working demo here

Guffa 15 年前

它不起作用,因为 toggleoff 当您尝试将Click事件绑定到元素时,这些元素尚不存在。

创建 切换关闭 从一开始的元素:

$('.readmore_holder').hide();
$('.readmore_holder').prev().append(' <a href="javascript:void(0);" class="toggleon">read-more</a>');
$('.toggleon').parent().next().append(' <a href="javascript:void(0);" class="toggleoff">read-less</a>');

$('.toggleon').click(function() {     
    $(this).parent().next().fadeIn();        
    $(this).hide();        
});

$('.toggleoff').click(function() {
    alert('works!');
});

我也变了 remove 到 hide 为了摆脱 read-more 链接。这样,您就可以在隐藏文本而不是重新创建文本时显示它。

Steffen 15 年前

非常简单的错误:当您为“read less”分配单击处理程序时,它还不存在,因此没有被分配。只需将分配移动到单击处理程序中即可。

要稍微清除代码,请查看:

$('.readmore_holder').hide().prev().append(' <a href="javascript:void(0);" class="toggleon">read-more</a>');

$('.toggleon').click(function()
{     
    $(this).parent().next().fadeIn();        

    $(this).parent().next().append(' <a href="javascript:void(0);" class="toggleoff">read-less</a>').click(function() {
        alert('works!');
    });
    $(this).remove();
});

Ventus 15 年前

也许你可以尝试用不同的方式。JQuery .toggle() 函数可以接受2个(甚至3个)函数处理程序作为参数。第一次单击后调用第一个函数,第二次单击后调用第二个函数。所以你可以这样做:


<style>
.readmore_holder { display: none; }
</style>
...
<p>head line</p>
<p class="readmore_holder">some text</p>
<a href="javascript:void(0)" class="toggle">read more</a>

<script type="text/javascript">
$("a.toggle").toggle(function(){
  $(this).html("hide");
  $(this).prev("p").show();  //for better effect you can use slideDown() here
}, function(){
  $(this).html("read more");
  $(this).prev("p").hide();  //for better effect you can use slideUp() here
});
</script>

user113716 15 年前

这是我的建议。 不要拆下连杆。 只需更改文本并修改代码即可处理这两种情况。

这会更有效率。

例子: http://jsfiddle.net/M6xdq/14/

$('.readmore_holder').hide()

    .prev().append(' <a href="javascript:void(0);" class="toggle">read-more</a>')

    .find('.toggle').click(function() {
        $(this).text(function(i,txt) { 
           var more = (txt === 'read-more');
            if(more)
                $(this).parent().next().append(this).fadeIn();
            else
                $(this).parent().fadeOut().prev().append(this);
            return (more) ? 'read-less' : 'read-more'; 
        });       
    });â

或者这两个链接都是在这里创建的, .show() 和 .hide() 使用。任何一种解决方案都比销毁和创建相同的元素更可取。

例子: http://jsfiddle.net/M6xdq/15/

$('.readmore_holder').hide()
        .append(' <a href="javascript:void(0);" class="toggleoff">read-less</a>')
        .find('.toggleoff')
        .click(function() {
             $(this).hide().parent().fadeOut().prev().find('.toggleon').show();
        })

        .parent().prev()
        .append(' <a href="javascript:void(0);" class="toggleon">read-more</a>')
        .find('.toggleon')
        .click(function() {
             $(this).hide().parent().next().fadeIn().find('.toggleoff').show();
        });â