function javascript does not work properly with the id of link

Question

I created confirmation message box using this plugin .

<input type="button" id="delete" value="Delete All" />
<input type="button" id="deleteByID" value="Delete Item By ID" />

When I click on each button, it called the callMessageBox() to generate the message box and the id of message box is dynamic by the button name. After message box was call, the actionOnMsgBox executes in order to call the callback function.

$('#delete').click(function(){
     callMessageBox('delete','Are you sure to delete all items from your cart?','Yes','No');
});
actionOnMsgBox('delete',deleteAllItemInCart);

$('#deleteByID').click(function () {
    callMessageBox('deleteByID','Are you sure to delete this item from your cart?','Yes','No');
});
 actionOnMsgBox('deleteByID',deleteItemInCart,item1);

These are my functions:

 function messageBox(btnID, heading, confirmMsg, cancelMsg){
   var box = ' <div id="modal"><div id="heading">'+heading+'</div><div id="content"> <a href="#" id="'+ btnID + 'revealYes" class="button green close"><img src="images/tick.png">'+confirmMsg+'</a> <a href="#" id="'+btnID+'revealNo" class="button red close"><img src="images/cross.png">'+cancelMsg+'</a>';
   return box;
 }
 function callMessageBox(btnID, heading, confirmMsg, cancelMsg){
     if($('#modal').length == 0)
         $('body').append(messageBox(btnID,heading,confirmMsg,cancelMsg))
            $('#modal').reveal({
                 animation: 'fade',
                 animationspeed: 320,
                 closeonbackgroundclick: true,
                 dismissmodalclass: 'close'
            });
 }

 function actionOnMsgBox(btnID,callback,item){
     $(document).on('click','#'+ btnID +'revealYes,#'+ btnID +'revealNo',function (e) {
        var choice = $(e.target).attr('id');
        if ($(this).attr('id') == btnID + 'revealYes'){
            if(typeof item === 'undefined'){
                callback();
            }else{
                callback(item);
            }
        } else {
            return false;
        }
    });
 }

Problem : when I clicked on Delete All button, then the messageBox() generated deleterevealYes and deleterevealNo. But when I clicked on Delete Item By ID the messageBox() still generated #deleterevealYes and #deleterevealNo, what I expected, it should be #deleteByIDrevealYes and #deleteByIDrevealYes.

Any idea what could be causing this. Thanks.

Answer 1

Change the below functions. Give unique id for reveal function. If same id is given, the first one will be executed always

function messageBox(btnID, heading, confirmMsg, cancelMsg){
   var box = ' <div id="modal'+btnID+'"><div id="heading">'+heading+'</div><div id="content"> <a href="#" id="'+ btnID + 'revealYes" class="button green close"><img src="images/tick.png">'+confirmMsg+'</a> <a href="#" id="'+btnID+'revealNo" class="button red close"><img src="images/cross.png">'+cancelMsg+'</a>';
   return box;
 }

 function callMessageBox(btnID, heading, confirmMsg, cancelMsg){
     if($('#modal'+btnID).length == 0)
         $('body').append(messageBox(btnID,heading,confirmMsg,cancelMsg))
            $('#modal'+btnID).reveal({
                 animation: 'fade',
                 animationspeed: 320,
                 closeonbackgroundclick: true,
                 dismissmodalclass: 'close'
            });
 }

Answer 2

i believe if($('#modal').length == 0) is causing your problem you only appending one div for all elements and skip the ones for particular ID