函数javascript与链接的id无法正常工作

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

我相信如果（$（'＃modal'）。length == 0）导致你的问题你只为所有元素附加一个div并跳过特定ID的那个