Question

I had some question that I not sure how actually to solve it, basically I will draw out a data and append into the web, and assign each data with it owns div button, which are remove and update, each click will remove all and reappend the data, code are as below

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

it work fine, but the problem now is, the code are not efficient, and I don’t have any idea on how to fix this, the for loop had create multiple click handler at the update button, so whenever I click the button, like it say, I had 5 data on it, the first data will fire 5 times of click event, and second data will fire 4 times of click event, these will go on until last data and cause the checking on duplicate data not working properly, any idea on how to fix this? Sorry for my poor English, any help will be great

Answer 1

Would using event delegation work for you? Instead of assigning event handlers right on the .upd div, you could do something like:

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

This will delegate the click event to the #dtdr div, which should already exist. When someone clicks the div it will check if the click originated from the .upd div and execute the function. This way, you never have to assign new event handlers when rows are added.