Javascript 双击添加的选择选项“不工作”

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

$("#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>');

});

$（“#讲师选项”）.dblclick（函数（）
{
var元素=$（“#讲师选项：选中”）；
var value=element.val（）；
元素。移除（）；
var values=value.split（“；”）
$（“#选定的#U讲师”）。追加（“+values[2]+”，“+values[1]+”）；
});

反之亦然：

它只工作一次，新添加的元素不会触发函数

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

你需要改用这个方法。在最新的jQuery版本中：

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

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

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

---

问题是如何将

dblclick

函数绑定到元素。当前选择器仅返回绑定时

select

元素中的选项元素。要改变这一点，可以使用委派事件

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

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

这里是一个更新的小提琴：

---

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

问题在于如何将

dblclick

函数绑定到元素。当前选择器仅返回绑定时

select

元素中的选项元素。要改变这一点，可以使用委派事件

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

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

这里是一个更新的小提琴：

---

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

这是因为处理程序没有绑定到新元素。您可以这样做，将其绑定到子体（在本例中为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'）。在（'dblclick'，'讲师选项'，函数（）上
{
var元素=$（“#讲师选项：选中”）；
var value=element.val（）；
元素。移除（）；
var values=value.split（“；”）
$（“#选定的#U讲师”）。追加（“+values[2]+”，“+values[1]+”）；
});
$（'body'）。在（'dblclick'，'selected#u讲师选项'，函数（）
{
变量元素=$（“#选定的#讲师选项：选定”）；
var value=element.val（）；
元素。移除（）；
var values=value.split（“；”）
$（“#讲师”）。追加（“+values[2]+”，“+values[1]+”）；
});

如果两者都有一个在绑定时存在的父/子元素，则可以使用该元素而不是

'body'

来提高性能

---

Fiddle:

发生这种情况是因为处理程序没有绑定到新元素。您可以这样做，将其绑定到子体（在本例中为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'）。在（'dblclick'，'讲师选项'，函数（）上
{
var元素=$（“#讲师选项：选中”）；
var value=element.val（）；
元素。移除（）；
var values=value.split（“；”）
$（“#选定的#U讲师”）。追加（“+values[2]+”，“+values[1]+”）；
});
$（'body'）。在（'dblclick'，'selected#u讲师选项'，函数（）
{
变量元素=$（“#选定的#讲师选项：选定”）；
var value=element.val（）；
元素。移除（）；
var values=value.split（“；”）
$（“#讲师”）。追加（“+values[2]+”，“+values[1]+”）；
});

如果两者都有一个在绑定时存在的父/子元素，则可以使用该元素而不是

'body'

来提高性能

小提琴：