javascript - 为动态生成的 div 多次调用单击操作

Question

在 ajax 调用中，我生成了一个 div 并创建了一个与此 div 关联的点击操作。我根据来自数据的键值为 div 分配一个唯一的 ID。这样做有问题

var $orderData = $('<div><table width="100%"><tr><td nowrap width="15%">'+valX1
                + '</td><td width="10%" class="imgClass" ><img src=' 
                + imgPath + ' id="img_'+serId+'" /></td> 
                + <td nowrap width="25%">' + customerName 
                + '</td><td nowrap width="25%">' + orderPendingCount 
                + '</td><td nowrap width="25%">' 
                + plant+'</td></tr>' + '<tr><td nowrap width="15%">' + modelName 
                + '</td><td></td><td nowrap width="25%">' 
                + totalNo + '</td><td nowrap width="25%">' 
                + deliveredTotal+'</td><td nowrap width="25%">'
                + salesPersonName + '</td></tr></table></div>'  );


$('body').on('click', '#img_'+serId, function(){
    $('body').css('cursor', 'default');
    alert(serId);
    return false;
});

点击操作被正确调用。

当 ajax 调用出现相同的 serId 时会出现问题。我假设为 div 再次创建了点击操作。这会导致重复点击操作调用。

有没有办法在我再次创建它之前清除 div ActionScript 和 div

Answer 1

您应该只使用一个类，该类将在之后自动获取该事件:

$('body').on('click', '.divImgClass', function(){
    $('body').css('cursor', 'default');
    alert(serId);
    return false;
});

然后你不必首先重置事件，它只会在那个类上出现