javascript - 如何在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();
}

下一个附加的选择将具有 code2 的 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 链接到现有选择后。

select2 覆盖选择并为所有选项创建列表(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 doc