将"Change"事件附加到使用 d3 创建的 select2 列表

Question

我无法成功侦听使用 d3 创建的 select2 列表中的更改.js

list = d3.select('.root').append('input').attr('type', 'hidden');
$(list).select2({
    placeholder: "Default",
    data: { results: data, text: 'text' },
    matcher: function(term, text, datum) {
        return text.toUpperCase().indexOf(term.toUpperCase())>=0 || datum.type.indexOf(term.toLowerCase())>=0;
    }
});

这成功地创建了 select2 列表，我能够选择值。

但是，我

无法将函数绑定到更改事件，我相信我应该能够像这样：

list.on('change', function(){
    console.log('Selected: ' + $(this).val());
});

我是否可以执行此操作，或者是否需要为输入元素显式使用选择器？

$('.root > input').on('change', function(){
    console.log('Selected: ' + $(this).val());
});

在此处查看（非）工作小提琴:)

http://jsfiddle.net/LbLjc/1/

Answer 1

尝试在此处使用事件委托，因为您的input元素已动态添加到 DOM 中：

$('body').on('change', '.root > input', function(){
    console.log('Selected: ' + $(this).val());
});

Answer 2

由于您的 ellements 是动态创建的，因此您应该为此使用事件委托

$('.root').on('change',"input", function(){
 console.log('Selected: ' + $(this).val());
});

Answer 3

执行此操作的正确

方法是遍历 d3 对象中的项，并将处理程序附加到所有项：

list.forEach(function(elem) {
  $(elem).on('change', log)
});

工作小提琴：http://jsfiddle.net/LbLjc/3/

如果您确信只想要第一个，则可以将其缩短为：

$(list[0]).on('change', log);