Question

我有多个select元素。当其中一个被更改时，我想将click事件仅绑定到具有.btn类的下一个元素。这是我的代码：

<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');
    });
}

在select更改后，会发生点击，每个.btn元素都会绑定点击。我正在使用jQuery。以下是Fiddle

的示例

Answer 1

on()的第二个参数被视为数据而不是选择器（选择器应该是一个字符串）

您使用on值的$el.next()的验证被视为自定义data（如果第二个参数不是字符串），并且事件绑定到whole元素 - 不使用事件委托

相反，您可以直接将处理程序绑定到$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>

Answer 2

您遇到的问题是on()的委托签名需要第二个属性中的字符串选择器，而不是jQuery对象。

但是，您可以使用off()方法删除任何以前添加的点击处理程序，并通过仅在可以单击时显示按钮来减少用户可能遇到的任何混淆，从而改进逻辑。试试这个：

$('select').change(function() {
    $('.btn').off('click').removeClass('active');
    $(this).next('.btn').addClass('active').click(function() {
        console.log('ciao');
    });
});

Updated fiddle

Answer 3

试试这个 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');
  });
}

问题还在于您将Jquery对象作为第二个参数传递。它应该是一个代表选择器的字符串

Answer 4

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/

将点击事件绑定到更改

4 个答案: