如何在select2上触发事件

Question

大家好，我的销售商品页面中有一些选择标签。第一个由 HTML 创建，其他由 jquery 创建，当用户单击按钮添加更多时追加

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

在document.ready 中，我在这个选择标签上应用了 select2

$(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();
}

下一个附加选择的 ID 为 code2。我正在管理它，没有任何问题

现在函数 getvalue() 在应用 select2 之前工作正常，但在应用 select2 之后，选择不会触发点击或任何事件。应用选择 2 后如何触发事件；

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

点击选择标签不会调用get 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 链接到现有选择后。

select2 覆盖 select 并为所有选项创建 list(li) 并且 select 被隐藏。

所以任何添加到 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 doc