动态产生div的多次点击操作被调用

Question

On a ajax call I am generating a div and also creating a click action associated with this div. I assign the div a unique Id based on key value coming from data. Problem doing this

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

Click action gets called correctly.

Issue occurs when same serId comes with the ajax call. I am assuming the click action gets created again for the div. This causes repeated click action call.

Is there a way I can clear the div action script and div before I create it again

Answer 1

you should just use a class what ever has that class will automatically get that event after:

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

Then you won't have to reset the event in the first place it will just be there on that class

Answer 2

insert the script before your regenerate the div and try

if($('#divid').length != 0) {
  $('#divid').remove();
}