javascript - 双击添加的选择选项不起作用

Question

我有两个选择，它们都使用一个函数将元素添加到另一个选择。 这是我拥有的:

$("#lecturers option").dblclick(function () 
{
    var element = $("#lecturers option:selected");
    var value = element.val();
    element.remove();
    var values = value.split(";")

    $("#selected_lecturers").append('<option value="' + value + '">' + values[2] + ', ' + values[1] + '</option>');

});

反之亦然:

http://jsfiddle.net/VJAJB/

它不知何故只工作一次，新添加的元素不会触发该功能。

知道如何解决这个问题吗？

Answer 1

问题在于如何将 dblclick 函数绑定(bind)到元素。当前选择器仅返回绑定(bind)时 select 元素中的选项元素。要改变这一点，您可以使用委托(delegate)事件。

$('#lecturers').on('dblclick', 'option', function() {
    //Do stuff here
});

这确保您添加到选择元素的任何选项元素在双击时都会触发此事件。

这是一个更新的 fiddle :http://jsfiddle.net/VJAJB/4/

请注意，其他用户已经为您提供了可行的解决方案。但是，最佳做法是限制绑定(bind)到文档本身的事件数。只要有可能，您应该将委托(delegate)的事件监听器绑定(bind)到最近的不变元素。