$.post("queryAllPipe.do", function(list){ $("#pipeVisual").children().remove(); var tbody = ""; $.each(list, function(n, value) { var trs = ""; trs += " <tr> <td> " + value.id + " </td> <td>" + value.pipeModelNumber + "</td><td>" + value.pipeStandard + "</td><td>" + value.pipeAmount + "</td>" + "<td><div class='btn-group'><a href='#' class='btn btn-default'>修改</a><a href='#' class='btn btn-danger' name='deletePipe'>删除</a></div></td>" + "</tr>"; tbody += trs; }); $("#pipeVisual").append(tbody); }); alert($("[name='deletePipe']")); //下面的事件必须在上面alert一下ajax动态添加的元素才能注册执行 $("[name='deletePipe']").on("click", function(){ var tr1 = $(this).parents("tr:first"); var pipeId = tr1.find("td:first-child").text(); //获取要删除订单的钢管id $.post("deletePipe.do", {pipeId:pipeId}, function(e){ tr1.remove(); }); });
如图所示,多数原因为界面ajax中动态添加的元素还没被添加上,就执行了js函数(js函数要调用动态元素)。解决办法: ajax方法中添加 async:false 。作用为,在ajax执行完毕后才执行之后的js。