Symfony，Jquery和Ajax，是否附加了本身已附加的元素？

Question

我有一个jQuery，将表（列表选择）中的数据行追加到另一个表。 它的工作方式就像您选择要提交的一个或多个项目（一行），并将其复制到另一个您可以提交的区域。

这是jquery函数：

$("#searchsub table tr").click(function(event) {
            if(event.target.type !== 'checkbox') {
                $(":checkbox", this).trigger("click");
            }
        });

        $("#showsub input[type=checkbox]").change(function() {
            if($(this).is(":checked")) {
                $(this).closest("tr").addClass("highlightrow");
                $(this).attr("checked",true);
                var datarow = $(this).closest("tr.datarow");
                var row = datarow.clone();
                row.find(".select").html("<span class='delete'>&#215;</span>");
                $("#submitshipment #datarow").append(row);
            } else {
                $(this).closest("tr").removeClass("highlightrow");
                $(this).removeAttr("checked");
                var index = $(this).closest("tr").attr("data-id");
                var findRow = $("#datarow tr[data-id='" + index + "']");
                findRow.remove();
            }
        })

        $("#datarow").delegate("span.delete", "click", function() {
            $(this).fadeOut(100, function(){
                $(this).closest("tr").remove();
                var index = $(this).closest("tr").attr("data-id");
                var findRow = $("#showsub tr[data-id='"+index+"']");
                findRow.removeClass("highlightrow");
                findRow.find("input[type=checkbox]").attr("checked", false);
            });
        })

因此，这很完美。 当用户单击带有列出数据的行表时，它将追加到另一个表，用户在完成选择行后将在其中提交表单。

但是，当我填充来自Ajax调用（搜索功能）的数据并将结果追加到列表时，上述jquery不再适用，并且当用户选择它时也不会追加。 可能是因为它无法识别已经添加的元素？

这是函数：

$(".searchsubform form").on("submit", function(event) {
            event.preventDefault();

            $.ajax({
                url: "{{ path('log_searchdano') }}",
                type: "POST",
                data: {"dano": $("#form_dano").val()},
                success: function(data) {
                    $("#showsub tbody tr.original").remove();
                    for(var i = 0; i < data.length; i++) {

                        var row = "<tr class='datarow' data-id='"+data[i].subid+"'>";
                        row += "<td><input type='hidden' name='searchsub[]' value='"+data[i].subid+"' />"+data[i].dano+"</td>";
                        row += "<td>"+data[i].partno+"</td>";
                        row += "<td>"+data[i].batchno+"</td>";
                        row += "<td>"+data[i].rackno+"</td>";
                        row += "<td>"+data[i].diecode+"</td>";
                        row += "<td>"+data[i].heatcode+"</td>";
                        row += "<td>"+data[i].inqty+"</td>";
                        row += "<td class='select'><input type='checkbox' id='subcheck' name='sub[]' value='"+data[i].subid+"' /></td>";
                        row += "</tr>";

                        $("#sublist table tbody").append(row);
                        $("#showsub td.select").closest("tr").addClass("original");
                    }

                }
            });
        })

编辑：这是我的html DOM：

http://pastebin.com/6KHiHV1w

Answer 1

傻我 而且我已经在代码中找到了解决方案。

$("#searchsub #showsub").delegate("tr", "click", function(event) {...

和

$("#showsub").delegate("input[type=checkbox]", "change",function() {...