双击添加的选择选项不起作用答案

【问题标题】：Double click on added select option not working双击添加的选择选项不起作用
【发布时间】：2013-12-26 22:59:05
【问题描述】：

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

$("#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/

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

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

【问题讨论】：

标签： javascript jquery select option

【解决方案1】：

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

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

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

这是一个更新的小提琴：http://jsfiddle.net/VJAJB/4/

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

【讨论】：

【解决方案2】：

这是因为处理程序没有绑定到新元素。您可以这样做，将其绑定到后代（在本例中为主体）并指定将应用到的选择器：

$('body').on('dblclick', '#lecturers option', 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>');
});

$('body').on('dblclick', '#selected_lecturers option', function () 
{
    var element = $("#selected_lecturers option:selected");
    var value = element.val();
    element.remove();
    var values = value.split(";")

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

});

如果在绑定时两者都有父/子元素，您可以使用它而不是 'body' 来提高性能。

小提琴：http://jsfiddle.net/VJAJB/2/

【讨论】：

【解决方案3】：

您需要改用on 方法。最新的 jQuery 版本是：

$( document ).on( "dblclick", "#lecturers option", function ()

Updated jsFiddle

【讨论】：