jQuery:在ajax加载的元素上没有触发事件

Question

我在jQuery/HTML5中有一个简单的前端(+后端生成的代码,它没有带来问题,所以我将省略它).当前使用的jQuery版本是1.8.3并且不存在版本冲突(即没有加载其他jQuery版本 - 它在其他系统中发生了很多次).

前端调用以下例程:

detailAjaxCall("\/client\/orders\/detailsLoad\/id\/3");

$(".upLink").click(function(){
    console.log("subiendo");
    var id = $(this).closest("tr").data('detail-id');
    var url = "\/client\/orders\/detailMoveUp" + "/id/" + id;
    detailAjaxCall(url);
    return false;
});

$(".downLink").click(function(){
    console.log("bajando");
    var id = $(this).closest("tr").data('detail-id');
    var url = "\/client\/orders\/detailMoveDown" + "/id/" + id;
    detailAjaxCall(url);
    return false;
});

$(".delLink").click(function(){
    console.log("borrando");
    var id = $(this).closest("tr").data('detail-id');
    var url = "\/client\/orders\/detailDelete" + "/id/" + id;
    detailAjaxCall(url);
    return false;
});

注意:url字符串没有格式错误.它们是由json导出器生成的(这一段代码是从view sourceGoogle Chrome浏览器中的选项中提取的).评估它们中的任何一个都将返回一个没有反斜杠的字符串.

在detailAjaxCall("/client/orders/detailsLoad/id/<number>")实际工作:它返回预期的JSON代码,当我打的网址,并呈现此时,相应的表项:

function detailAjaxCall(url)
{
    $.get(
        url,
        {},
        function(data, status, xhr) {
            //todo refrescar(data);
            var table = $("#detail-list");
            table.empty();
            if (data.length == 0) {
                $("<tr></tr>").addClass("empty").append($("<td></td>").addClass("empty").text("No hay detalles para este pedido")).appendTo(table);
            } else {
                $.each(data, function(index, element) {
                    $("<tr></tr>")
                        .data('detail-id', element['id'])
                        .append(
                            $("<td></td>")
                                .append(
                                    $("<span></span>").addClass("product-name").text(element['producto_nombre'])
                                )
                                .append("<br />")
                                .append(
                                    $("<span></span>").addClass("product-dims").text(
                                        "Ancho: " + element['ancho'] +
                                        ", Largo: " + element['largo'] +
                                        ", Calibre: " + element['calibre']
                                    )
                                )
                        )
                        .append($("<td></td>").addClass("quantity").text(element['cantidad']))
                        .append($("<td></td>").addClass("price").text(element['precio']))
                        .append(
                            $("<td></td>")
                                .append(
                                    $("<a></a>").addClass("upLink").text("subir").attr("href", "javascript: void 0")
                                ).append(" ")
                                .append(
                                    $("<a></a>").addClass("downLink").text("bajar").attr("href", "javascript: void 0")
                                ).append(" ")
                                .append(
                                    $("<a></a>").addClass("delLink").text("eliminar").attr("href", "javascript: void 0")
                                ).append(" ")
                        )
                        .appendTo(table);
                });
            }
        },
        'json'
    ).fail(function(){
        $("#ajaxDetailErrorDialog").dialog("open");
    });
}

<a></a>因为我的问题与他们有关,所以请注意" " 的产生.它们都具有类,如delLink,upLink和downLink.

我的问题从这里开始:调用$(".delLink").click(callback),$(".upLink").click(callback),$(".downLink").click(callback)似乎不绑定事件到新创建的项目操作(虽然它们在Ajax调用中创建).查看方法的源代码click,传递参数,就像调用一样on.

那么:我在动态绑定事件时做错了什么,所以新创建的元素也会触发我的事件？

Answer 1

您需要动态委派点击处理程序,因为您在创建新元素之前分配了单击处理程序.

例如,委托给document:

$(document).on('click', '.upLink', function(){
    console.log("subiendo");
    var id = $(this).closest("tr").data('detail-id');
    var url = "\/client\/orders\/detailMoveUp" + "/id/" + id;
    detailAjaxCall(url);
    return false;
});

这是有效的,因为document此处理程序将检查所有点击,以查看它们是否匹配.upLink.即使您在分配了此元素后创建了新元素,点击仍会通过此事件.