如果按钮在一个div/list中有多个按钮，则无法在javascript上单击()
如果按钮在一个div/list中有多个按钮，则无法在javascript上单击()
提问于 2018-08-12 01:20:04
我有一个问题，如果一个div/list中有多个按钮，Button就不能在javascript上点击()。在这种情况下，如果我点击"ADD“按钮，它什么也不做。但是“删除”按钮可以。如果我删除了js上的Delete函数，则add按钮将正常工作。怎么了？
我有这样的HTML
<ul class="coll-list">
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
</ul>
和JS函数：
var id ="";
$('.coll-list').off('click').on('click','.btn-remove-coll', function(e) {
id = $(this).data('id');
// doing ajax thing
});
$('.coll-list').off('click').on('click','.btn-add-coll', function(e) {
id = $(this).data('id');
// doing ajax thing
});
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-12 08:22:01
出现此问题的原因是您之前设置的第二个$('.coll-list').off('click') remove ALL on('click')事件(即在本例中单击.btn-remove-coll )。
您可以尝试更改页面中的off('click').on('click')顺序，您将看到这将更改工作按钮(或删除或添加)。
此处仅删除按钮有效
$('.coll-list').off('click').on('click','.btn-add-coll', function(e) {
alert("add")
});
$('.coll-list').off('click').on('click','.btn-remove-coll', function(e) {
alert("remove")
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="coll-list">
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
</ul>
仅和此处添加按钮
$('.coll-list').off('click').on('click','.btn-remove-coll', function(e) {
alert("remove")
});
$('.coll-list').off('click').on('click','.btn-add-coll', function(e) {
alert("add")
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="coll-list">
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
</ul>
2使两个按钮都工作的可能解决方案是：
只需在1 on('click')中删除2次点击即可删除
$('.coll-list').off('click').on('click','.btn-add-coll, .btn-remove-coll', function(e) {
if($(this).hasClass("btn-add-coll")){
alert("add")
} else {
alert("remove")
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="coll-list">
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
</ul>
Stack Overflow用户
发布于 2018-08-12 02:21:45
尝试使用.coll_list更改您的JavaScript代码中的.coll-list，因为这是您的ul HTML标记的类。
编辑由于某种原因，在同一个<li>标签中为两个不同的div提供点击功能似乎是不可能的。我建议您稍微更改一下HTML标记，并使用<div>标记而不是<ul>。小提琴：jsfiddle.net/xpvt214o/592987
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51802040
复制相关文章
相似问题