我有一个触发元素和一个响应元素。
<div class="more"></div>
<div class="info"></div>
我想绑定(bind)一个打开/关闭类型的事件。
$('.more').delegate($('.more'), 'click', function(){
$(this).removeClass('more');
$(this).addClass('less');
$(this).text("less...");
$('.info').addClass("open");
});
$('.less').delegate($('.less'), 'click', function(){
$(this).addClass('more');
$(this).removeClass('less');
$(this).text("more...");
$('.info').removeClass("open");
});
它没有按预期工作,如果第二个函数嵌套在第一个函数中,那么您只能打开和关闭一次。 如果脚本的格式如上所示合理,它将打开但不会关闭。
谁能帮帮我? 如果脚本可以支持 .info 可以是同级元素或紧跟在 $(.more/.less) 的父级之后的元素,则奖励。
我一直在玩弄 .on/.live/.bind 但不如上面成功。
最佳答案
使用事件 delegation ,并绑定(bind)到文档或直接父元素,而不是相同的元素
$(document).on( 'click',".more", function(){
$(this).removeClass('more');
$(this).addClass('less');
$(this).text("less...");
$('.info').addClass("open");
});
$(document).on('click',".less", function(){
$(this).addClass('more');
$(this).removeClass('less');
$(this).text("more...");
$('.info').removeClass("open");
});
DEMO
注意:委托(delegate)已与最新版本的 jquery 过时,因此请改用 on,
问题:您被委托(delegate)给相同的元素 $('.less'),$('.more')
使用直接 parent
或 document
关于javascript - jQuery 将事件绑定(bind)到具有动态类的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25158078/