javascript - 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() {...