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

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

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

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

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

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