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;
});

注意：网址字符串格式不正确。它们由json导出器生成（此代码块是从Google Chrome浏览器中的view source选项中提取的）。评估其中任何一个都会返回一个没有反斜杠的字符串。

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");
    });
}

注意生成＆＃34; <a></a>＆＃34;因为我的问题在于他们。它们都有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匹配。即使您在分配了此元素后创建了新元素，点击仍会通过此事件。

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

1 个答案: