如何在select2上觸發事件

Question

嗨，大家好，我的銷售商品頁面中有一些選擇標簽。 當用戶單擊按鈕添加更多內容時，第一個由HTML創建，其他則由jquery附加創建

<select id='code0' onclick='getvalue(this)'><option>1</option></select>

並在document.ready中將select2應用於此select標簽

$(document).ready(function(){
 $("#code0").select2();
})


function append(){
  $("table").append("<tr><td><select id='code1' onclick='getvalue(this)'><option>1</option></select></td></tr>");
  $("#code1").select2();
}

下一個附加的選擇將具有代碼2的ID。 我正在管理它沒有任何問題

現在，函數getvalue（）在應用select2之前運行良好，但是在應用select2之后，select不會觸發點擊或任何事件。 應用選擇2后如何觸發事件；

function getvalue(item){
  alert("event triggered"); // to check that jquery called this function or not
  console.log(item.value);
}

單擊選擇標簽不調用獲取值功能；

每當頁面加載時，我都可以在控制台上看到此錯誤

jQuery-2.1.4.min.js:2 Uncaught TypeError: Cannot read property 'call' of null
    at Function.each (jQuery-2.1.4.min.js:2)
    at MutationObserver.<anonymous> (select2.min.js:2)

Answer 1

將select2鏈接到現有的select之后。

select2覆蓋所有選項的select和create list（li），並且select被隱藏。

因此，添加到選擇中的任何事件將無法直接使用。

Select2插件提供了可用於滿足需要的功能

將select2 ele分配為var並使用插件提供的方法

var select2Ele = $("#code0").select2();

select2Ele.on("select2:select", function (event) {
   // after option is selected 
});

select2Ele.on("select2:selecting", function (event) {
   // before selection 
});

對於多個select2，上面的代碼將像這樣工作。 在log方法中，我們有一個事件，可用於獲取當前元素值和其他內容

$eventSelect.on("change", function (e) { log("change"); });

function log (name, evt) {
  if (!evt) {
    var args = "{}";
  } else {
    var args = JSON.stringify(evt.params, function (key, value) {
      if (value && value.nodeName) return "[DOM node]";
      if (value instanceof $.Event) return "[$.Event]";
      return value;
    });
  }
  var $e = $("<li>" + name + " -> " + args + "</li>");
  $eventLog.append($e);
  $e.animate({ opacity: 1 }, 10000, 'linear', function () {
    $e.animate({ opacity: 0 }, 2000, 'linear', function () {
      $e.remove();
    });
  });
}

請參閱select2文檔