使用 JQuery 克隆的下拉框不保留原始的行为答案

【问题标题】：Dropdown Boxes cloned with JQuery don't retain the behaviour of the original使用 JQuery 克隆的下拉框不保留原始的行为
【发布时间】：2011-07-24 14:00:18
【问题描述】：

我要做的是克隆 3 个下拉框并将它们添加到原始集的下方。

目前它可以工作，但克隆不保持原始集的功能。

原件所做的是检查第一个下拉框的选定值，以便填充其他两个下拉列表。

Fiddle 在下面，但由于某种我无法弄清楚的原因，添加克隆似乎不起作用，它在我正在处理的页面上工作。

http://jsfiddle.net/pV6x5/6/

谢谢，

马丁

更新

更新了小提琴，它缺少advancedsearch div：http://jsfiddle.net/pV6x5/7/

【问题讨论】：

标签： javascript jquery html clone

【解决方案1】：

使用 jQuery live 将事件绑定到新元素。使用 live 它将事件绑定到所有当前和未来的元素，其中仅定义一个更改处理程序将仅绑定当前元素（您也可以在每次创建元素时重新附加事件，但为什么要在 live 处理它时这样做给你）

$tags.live("change",function(){ /* your stuff here */});

UPDATE这里是change函数和if块：

$(document).ready(function() 
{
$tags = $("select[name='tags']");

$tags.live("change",function()
{
    $operands = $(this).parent().find("select[name='operands']");
    $values = $(this).parent().find("select[name='values']");
if ($(this).val() == "agent") 
{

$(this).parent().find("select[name='operands'] option").remove();

$("<option>=</option>").appendTo($operands);
$("<option>!=</option>").appendTo($operands);

$(this).parent().find("select[name='values'] option").remove();
$("<option>excel</option>").appendTo($values);
$("<option>msword</option>").appendTo($values);
$("<option>ppt</option>").appendTo($values);
$("<option>pdf</option>").appendTo($values);
$("<option>image</option>").appendTo($values);
$("<option>txt</option>").appendTo($values);
$("<option>html</option>").appendTo($values);
$("<option>csv</option>").appendTo($values);
$("<option>ooxml</option>").appendTo($values);
$("<option>flash</option>").appendTo($values);
$("<option>wmf</option>").appendTo($values);
}

【讨论】：

durr 当我试图将您的标签对象剪切并粘贴到实时函数时，我遇到了一个重大的语法缺陷。这个语法是正确的。
有些东西看起来不正确，你为什么要把 .change() 留在里面？只需将其替换为 .live('change') 绑定即可。作为旁注，我不知道这是否是有意的，但我喜欢在所有 jQuery 对象变量名称前加上“$”前缀的想法，这是一种很好、简单的方法来描述哪些已经是 jQuery 对象。
非常感谢您的帮助，但它引发了一个奇怪的错误：jsfiddle.net/pV6x5/9 当您在克隆下拉列表中选择选项时，值下拉列表（3 个中的最后一个）原来是什么变化，而不是相关的克隆：S
我刚刚注意到您正在尝试克隆并保持相同的 ID。 Id 需要是唯一的，因此在插入克隆元素之前。您还应该更改更新代码以通过执行 $(this).parent().find(".values") 来查找其类为值的 this 的兄弟姐妹
if($(this).val() == "agent"){ $(this).parent().find("select[name='操作数'] 选项").remove();

【解决方案2】：

我相信您需要使用 .live() 绑定，以便将事件附加到“将来”创建的对象上。 http://api.jquery.com/live/

所以你需要 .live('change') 而不是 .change()

【讨论】：