使用jQuery动态添加表行，然后在每个新行中添加自动填充选择框

Question

嘿，伙计们，我昨天试图问这个问题，但我没有清楚或简单地解释自己。

我有一个在表格中设置的表格。 用户可以根据需要添加新行（和更多表单元素）。 此表单的每一行都需要有自己的单独的选择框和相应的子类别选择框。

所以基本上...

姓名| 选择
xxxxxx | [类别选择] [子类别选择]
xxxxxx | [类别选择] [子类别选择]
xxxxxx | [类别选择] [子类别选择]

你明白了。 :)

现在，所有添加的行都有自动填充的损坏版本。

关于如何使它起作用的任何建议？

这是自动填充的代码，并添加我正在使用的表格行代码，如果这有助于绞尽脑汁。 如果有人有更好的答案，我会很乐意放弃。

免费提供解决方案的Cookie，可以在其中添加/删除表单行。 :)

// auto populate select code

 $(document).ready(function(){
            $("#selectionresult").hide();

            $("#selection").change( function() {
                $("#selectionresult").hide();
                $("#result").html("Retrieving ...");
                $.ajax({
                    type: "POST",
                    data: "data=" + $(this).val(),
                    url: "include/javascript_population.php",
                    success: function(msg){
                        if (msg != ""){
                            $("#selectionresult").html(msg).show();
                            $("#result").html("");
                        }
                        else{
                            $("#result").html("<em>No item result</em>");
                        }
                    }
                });
            });
        });


// add table row code

  $(document).ready(function() {
        $("#add").click(function() {
          $('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last');

          return false;
        });
    });

    $("#mytable tbody>tr:last").each(function() {this.reset();});     

任何帮助将不胜感激大家。 提前致谢。 :)

Answer 1

您可能会遇到ID冲突和事件绑定的问题。 尝试使用live（）;

当您克隆和移动DOM元素时，事件变得不受限制。

尝试这个：

$("#add").live("click", function() {
$("#selection").live("change", function() {

而且看起来您可能正在复制ID。 检查并确保未克隆＃selection，＃selectionresult等。