Question

我有一个包含多个输入的页面，所有内容如下所示。我想在执行onclick之前显示一个模态。单击模态的“是”按钮时，应该运行onclick函数。我的问题是，当我单击是时，执行的功能始终是第一个输入的功能。然后我必须执行单击按钮的功能非常感谢您对此的任何帮助。

HTML：

<input id="first" class="btn btn-success" type="button" onclick="doFirstFunction()" value="FirstFunction"/><br>
<input id="second" class="btn btn-success" type="button" onclick="doSecondFunction()" value="SecondFunction"/><br>
<input id="third" class="btn btn-success" type="button" onclick="doThirdFunction()" value="ThirdFunction"/>

//模态

<div class="modal fade in" id="confirmationYesNo" aria-hidden="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title">Confirmation</h4>
            </div>
            <div class="modal-body">
                Are you sure ?
                <button id="btnYes" type="button" class="btn btn-danger" >Yes</button>
                <button type="button" class="btn btn-success" data-dismiss="modal">No</button>
            </div>
        </div>
    </div>
</div>

JS：

    var input = $("input[type=button]");
    var defaultFunctionToCallLater = $("input").prop('onclick');
    console.log("defaultFunctionToCallLater", defaultFunctionToCallLater);
    $("input").prop("onclick", null );
    //$("input").removeProp("onclick");

    input.click(function(e){
            var $target = $(e.target);
            var isThird = (e.target.id == 'third');

    if(!(isThird)){                
      $('#confirmationYesNo').appendTo("body").modal({
      backdrop:'static',keyboard:false}).show();    
        $("#btnYes").click(function(){
            addEventListener('click', defaultFunctionToCallLater);
        });
      }

});

function doFirstFunction(){
    location.href="link1";
};

function doSecondFunction(){
    location.href="link2";

}; 

function doThirdFunction(){
    location.href="link3";
};

Answer 1

你输入的所有内容都应该调用showModal（id）（id = 1; id = 2; ...）当您按YES

时，模态功能将仅显示模态并重定向到您的js功能

function showModal(id){

(showtheModal)
IF YES IS PRESSED

switch(id){
        case 1:
            doFirstFunction();
            break;
        case 3:
            doSecondFunction();
            break;
        case 3:
            doThirdFunction();
            break;
    }
}

Answer 2

<input id="first" class="btn btn-success" type="button" onclick="modalFunction(1)" value="FirstFunction"/><br>
<input id="second" class="btn btn-success" type="button" onclick="modalFunction(2)" value="SecondFunction"/><br>
<input id="third" class="btn btn-success" type="button" onclick="modalFunction(3)" value="ThirdFunction"/>

这是JS

function openModal(callbackFunc) {
   switch(callbackFunc) {
      case 1:
         $("#btnYes").on('click', doFirstFunction);
         break;
      case 2:
         $("#btnYes").on('click', doSecondFunction);
         break;
      case 3:
         $("#btnYes").on('click', doThirdFunction);
         break;
   }
}

点击按钮=＆gt;防止onclick＆amp; show modal，点击是=＆gt;回调onclick函数

2 个答案: