jQuery對於多個事件具有相同的功能，每個事件針對不同的元素嗎？

Question

我想完成這里的工作，但要有所不同：我希望每個事件都針對不同的元素。

用例是一個選擇框，如果選擇了第一個“選擇您的選項”之外的任何選項，則應觸發事件

$(document).on('change', 'select:nth-child(1)', function(e) ){
  do_stuff();
});


$(document).on('click', 'select:not(:first-child)', function(e) ){                         
  do_stuff();
});

是否有一種組合的，更簡潔的方式來執行此操作，而無需創建do_stuff() ？

沒有事件觸發兩次怎么辦？

Answer 1

測試功能中的位置。

$(document).on("change click", "select option", function(e) {
    if ($(this).index() == 0) {
        // do stuff for first child
    } else {
        // do stuff for other children
});

但是，我不認為change事件是在<option>元素上觸發的，它只是在<select>本身上觸發的。 所以您的基本前提似乎是錯誤的，因為change事件永遠不會在select:nth-child(1)上觸發。

Answer 2

您有一個答案，但也可以使用以下方法的組合：

注意：轉到頁面上的元素以觸發focusin事件

$('#selectcontainer').on('change focusin manual', ".myselectthing", function(e) {
  var selectionIndex = $(this).prop('selectedIndex');
  $('#results').text("this type " + e.type + ":" + $(this).val() + " : " + selectionIndex);
});

$('#selectcontainer').find('.myselectthing').val("ralf").trigger("manual");

一些示例標記：

<div id="results">
  empty
</div>
<div id="selectcontainer">
  <select class="myselectthing">
    <option value="me">choose me</option>
    <option value="ralf">choose ralf</option>
    <option value="charlie">choose charlie</option>
  </select>
</div>

玩它： https : //jsfiddle.net/96mgswas/1/