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

Double click on added select option not working

本文关键字：选项 不起作用 选择 添加 双击      更新时间：2024-05-12

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

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

不知何故，它只工作一次，并且新添加的元素不会触发该函数。

你知道怎么解决这个问题吗？

问题是如何将dblclick函数绑定到元素。当前选择器只返回绑定时select元素中的选项元素。要更改此设置，可以使用委派事件。

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

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

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

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

发生这种情况是因为处理程序没有绑定到新元素。您可以这样做，这将把它绑定到一个子代（在本例中为主体），并指定它将应用到的选择器：

$('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'来提高性能。

Fiddle：http://jsfiddle.net/VJAJB/2/

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

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

更新的jsFiddle

相关文章：