我有一个按钮。当我单击它时,我将一些按钮附加到 DOM。
我遇到的问题是我附加的那些按钮多次触发。
$(el).on('click', function (e) {
key();
});
function key() {
$(document).on('click', '#key li', function () {
console.log($(this));
});
}
第一次 key()
被调用时,console.log
触发一次
我第二次调用 key()
console.log
触发两次
等等
我试过添加 $(document).find('#key li').unbind('click')
,但这似乎不起作用
有什么想法吗?
编辑:
这是一个 jsfiddle example (如下所示)。
$('button').on('click', function () {
$('.cont').remove();
$('.container').remove();
var html = '<button class="cont">click</button><div class="container">placeholder</div>';
$('body').append(html);
key();
});
$(document).on('click', '.cont', function () {
var html = '<div id="but_placeholder"><button class="one">1</button><button class="two">2</button><button class="three">3</button></div>';
$('.container').html(html);
});
function key() {
$(document).on('click', '#but_placeholder button', function () {
$('input').val($('input').val() + $(this).html());
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input" />
<button>test</button>
要重现,点击测试
按钮,然后点击,然后点击
1
2
3
并重复这个过程
您会注意到,第二次执行该过程时,文本加倍
最佳答案
这样做
function key() {
$('#key li').unbind('click');
$('#key li').bind('click', function () {
console.log($(this));
});
}
或者你可以做
function key() {
$('#key').find('li').unbind('click');
$('#key').find('li').bind('click', function () {
console.log($(this));
});
}
我想第二个肯定会起作用。
更新方法
function key() {
$(document).off('click', '#but_placeholder button');
$(document).on('click', '#but_placeholder button', function () {
$('input').val($('input').val() + $(this).html());
});
}
关于javascript - 点击事件触发多次问题,怎么办?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20733638/