函數javascript與鏈接的id無法正常工作

Question

我使用這個插件創建了confirmation message box 。

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

當我點擊每個按鈕時，它調用callMessageBox()來生成消息框，消息框的id是按鈕名稱動態的。 在調用message box之后，執行actionOnMsgBox以調用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);

這些是我的功能：

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

問題：當我點擊Delete All按鈕時， messageBox()生成了deleterevealYes和deleterevealNo 。 但是當我點擊按Delete Item By ID ， messageBox()仍然生成了#deleterevealYes和#deleterevealNo ，我的預期，應該是#deleteByIDrevealYes和#deleteByIDrevealYes 。

任何想法可能導致這種情況。 謝謝。

Answer 1

更改以下功能。 為揭示功能提供唯一ID。 如果給出相同的id，則將始終執行第一個id

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的那個