Question

我有一些问题，我不确定如何解决它，基本上我会绘制一个数据并附加到网络上，并为其分配每个数据拥有div按钮，这是删除和更新，每次点击将删除所有并重新获取数据，代码如下

function DrawData(){ var txtHd = $('input[id$="hidText1"]').val(); 
if (typeof(txtHd) != "undefined" || txtHd != "") //if have value
{ 
    var sSplit = txtHd.split(sDelimiter);
    var i;
    var div1, div2, div3, div4, div5, row1, comment;
    for (i=0;i<=sSplit.length-1;i++){
        if (sSplit[i].trim() == "") { return true; }
        comment = "";
        iAdd1 = i + 1;
        div1 = "<div class=container><div id=" + sSplit[i] +" class=number>" + iAdd1 + "</div>";
        div2 = "<div class=stage>Level " + iAdd1 + "</div>";
        div3 = "<div class=name>" + sSplit[i] + "</div>";
        div4 = "<div id=rem" + iAdd1 +" class=rem>remove</div>";
        div5 = "<div id=upd" + iAdd1 +" class=upd>update</div>";;
        div6 = "<div class=drfm>Comment: " + comment +  "</div></div>";

        row1 = div1 + div2 + div3 + div4 + div5 + div6;
        $('#dtdr').append(row1);
        $('#errmsg').fadeOut();
        removeValue(); //add remove function
        updateValue(); //add update function into the div
    }
}}

function updateValue(){
$('.upd').on('click', function(){ 
    var cLb=$('input[id$="hidText1"]').val();
    var updName = $(this).parent().find('.name').text();
    var repName = $('input[id$=fl_Approval]').val().trim();

    if (repName == ""){ $('#errmsg').text("Add error: [ Not allow to add empty name ]"); $('#errmsg').fadeIn(); return; } //check empty value
    if (checkArrayDup(repName,cLb) == true){ $('#errmsg').text("Add error: [ Name: "+ repName + " exist in the list ]"); $('#errmsg').fadeIn(); return; } //check duplicate

    updName = updName + sDelimiter;
    repName = repName + sDelimiter;
    var newVal= $('input[id$="hidText1"]').val().replace(updName ,repName);
    $('input[id$="hidText1"]').val(newVal);
    $('.container').remove();
    DrawData();
});

它运行正常，但现在的问题是，代码效率不高，而且我对如何修复它没有任何想法，for循环在更新按钮上创建了多个单击处理程序，所以每当我点击按钮，就像它说的那样，我有5个数据，第一个数据将触发5次点击事件，第二个数据将触发4次点击事件，这些将持续到最后一个数据并导致检查重复数据不正常，任何关于如何解决这个问题的想法？对不起，我的英语很差，任何帮助都会很棒

Answer 1

使用事件委派会为您服务吗？而不是在.upd div上直接分配事件处理程序，您可以执行以下操作：

$('#dtdr').on('click', '.upd', function(e) { console.log(this); # --> .upd div });

这会将click事件委托给#dtdr div，该div应该已经存在。当有人点击div时，它将检查点击是否来自.upd div并执行该功能。这样，您就不必在添加行时分配新的事件处理程序。

Jquery for循环导致更新按钮多次激活

1 个答案: