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函数绑定到元素。当前选择器仅返回绑定时select元素中的选项元素。要更改此设置，您可以使用委派事件。

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

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

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

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

Answer 2

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

$('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/

Answer 3

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

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

Updated jsFiddle

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

3 个答案: