[英]Bind click event to single select element on change
I have multiple select
elements. 我有多个
select
元素。 When one of them is changed I want to bind a click event only to its next element with the .btn
class. 当其中一个更改时,我只想将单击事件绑定到具有
.btn
类的下一个元素。 This is my code: 这是我的代码:
<div class="whole">
<ul>
<li>
first
<select>
<option></option>
<option>reject</option>
<option>hire</option>
</select>
<span class="btn">button</span>
</li>
<li>
second
<select>
<option></option>
<option>reject</option>
<option>hire</option>
</select>
<span class="btn">button</span>
</li>
<li>
third
<select>
<option></option>
<option>reject</option>
<option>hire</option>
</select>
<span class="btn">button</span>
</li>
</ul>
</div>
$('select').change(function() {
var $changed = $(this);
bindClick($changed);
});
var bindClick = function($el){
$('.whole').on('click', $el.next(), function() {
console.log('ciao');
});
}
What happens is that after a select
is changed click is bound on every .btn
element. 发生的情况是,更改
select
后,单击将绑定到每个.btn
元素。 I am using jQuery. 我正在使用jQuery。 Here is an example Fiddle
这是一个小提琴的例子
Your second argument to on() is considered as data not as a selector(selector should be a string) on()的第二个参数被视为数据而不是选择器(选择器应为字符串)
The verison of on
you are using the $el.next()
value is considered as custom data
(if the second argument is not a string) for the event and the event is bound to the whole
element - does not use event delegation 您正在使用
$el.next()
值的on
的版本被视为事件的自定义data
(如果第二个参数不是字符串),并且该事件绑定到whole
元素-不使用事件委托
Instead you can directly bind the handler to the $el.next()
element 相反,您可以将处理程序直接绑定到
$el.next()
元素
$('select').change(function() { var $changed = $(this); bindClick($changed); }); var bindClick = function($el) { $el.next().on('click', function() { snippet.log('change: ' + this.innerText); }); $('.whole').on('click', $el.next(), function(e) { snippet.log('whole click:' + e.data.text()); console.log('event', e) console.log('data', e.data) }); }
li { padding: 2em; } .btn { color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> <div class="whole"> <ul> <li>first <select> <option></option> <option>reject</option> <option>hire</option> </select> <span class="btn">button 1</span> </li> <li>second <select> <option></option> <option>reject</option> <option>hire</option> </select> <span class="btn">button 2</span> </li> <li>third <select> <option></option> <option>reject</option> <option>hire</option> </select> <span class="btn">button 3</span> </li> </ul> </div>
The issue you have is that the delegate signature of on()
expects a string selector in the second property, not a jQuery object. 您遇到的问题是
on()
的委托签名需要第二个属性中的字符串选择器,而不是jQuery对象。
However you can improve the logic by using the off()
method to remove any previously added click handlers and also by reducing any confusion the user may have by only displaying a button when it can be clicked. 但是,您可以通过使用
off()
方法删除任何以前添加的单击处理程序,以及通过仅在可单击按钮时显示一个按钮来减少用户可能产生的混乱,来改善逻辑。 Try this: 尝试这个:
$('select').change(function() {
$('.btn').off('click').removeClass('active');
$(this).next('.btn').addClass('active').click(function() {
console.log('ciao');
});
});
Try this, Working Fiddle 试试这个, 工作小提琴
$('select').change(function() {
var $changed = $(this);
bindClick($changed.closest('li').next().find('select')); //pass the next select element
});
var bindClick = function($el){
$el.on('click',function(){ // bind event directly to that element, without using event delagation
console.log('ciao');
});
}
Also the problem was you were passing a Jquery Object as your second parameter. 还有一个问题是您要传递一个Jquery对象作为第二个参数。 it should be a string which represents a selector
它应该是代表选择器的字符串
Try this
[
$('select').change(function() {
var $changed = $(this);
bindClick($changed);
});
var bindClick = function($el){
$el.next().addClass('active')
$('.whole').off('click','.active')
$('.whole').on('click','.active',function(){
console.log('ciao');
});
}
]
https://jsfiddle.net/ohnruubh/5/ https://jsfiddle.net/ohnruubh/5/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.