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

Symfony，Jquery＆amp; Ajax，附加已附加的元素？

1 个答案: