1

我有一些问题，我不确定如何实际解决它，基本上我会提取一个数据并附加到网络中，并为每个数据分配它拥有的 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 次点击事件，这些将持续到最后一个数据并导致重复数据检查无法正常工作，关于如何解决这个问题的任何想法？对不起我的英语不好，任何帮助都会很棒

4

1 回答 1

1

使用事件委托对你有用吗？您可以执行以下操作，而不是直接在 .upd div 上分配事件处理程序：

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

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

于 2012-12-04T02:13:45.300 回答