gpt4 book ai didi

javascript - jQuery:事件不会在加载了 ajax 的元素上触发

转载 作者:行者123 更新时间:2023-11-29 16:12:54 25 4
gpt4 key购买 nike

<分区>

我在 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 导出器生成的(这段代码是从 Google Chrome 浏览器的 view source 选项中提取的)。评估其中任何一个都将返回一个没有反斜杠的字符串。

detailAjaxCall("/client/orders/detailsLoad/id/<number>")实际工作:当我点击 url 时它返回预期的 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这样的类(class), upLinkdownLink .

我的问题从这里开始:调用 $(".delLink").click(callback) , $(".upLink").click(callback) , $(".downLink").click(callback)似乎没有将事件绑定(bind)到新创建的项目(尽管它们是在 ajax 调用中创建的)。查看 click 的源代码方法,传递参数,就像调用 on .

那么:动态绑定(bind)事件我做错了什么,所以新创建的元素也会触发我的事件?

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com