0

我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的and时，我所期望的应该是and 。messageBox()#deleterevealYes#deleterevealNo#deleteByIDrevealYes#deleteByIDrevealYes

知道是什么原因造成的。谢谢。

4

2 回答 2

1

更改以下功能。为显示功能提供唯一 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'
            });
 }
于 2013-09-06T10:58:08.883 回答
1

我相信 if($('#modal').length == 0) 会导致您的问题，您只需为所有元素附加一个 div 并跳过特定 ID 的那些

于 2013-09-06T11:09:22.993 回答