Question

我使用this plugin创建了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。< / p>

知道可能导致这种情况的原因。感谢。

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

Answer 2

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

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

2 个答案: