javascript - 将单击事件绑定(bind)到更改时的单个选择元素

Question

我有多个 select 元素。当其中一个发生更改时，我只想使用 .btn 类将单击事件绑定(bind)到其下一个元素。这是我的代码:

<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 元素上都会绑定(bind)单击。我正在使用 jQuery。这是一个例子Fiddle

Answer 1

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

您正在使用 $el.next() 值的 on 版本被视为自定义数据(如果第二个参数是不是字符串)的事件，并且事件绑定(bind)到整个元素 - 不使用事件委托(delegate)

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