在继续执行代码jquery的下一步之前等待用户活动

Question

我正在构建简单的插件以进行确认。我发送了yes或no个活动的插件请求。点击数据库中的yes删除项目＆amp; no逃脱了这一步。现在我希望我的插件等待用户活动。如果用户单击no，则停止该功能的当前代码。如果用户按yes，则继续执行部分代码。

像：

 $(document).on("click",".somebtn", function(){
      $(this).confirm();   //calls plugin

      $(this).confirm.no();  //calling plugin 'no' function
       // How to get returned data from this function of plugin
       //here I want my plugin to wait for user activity. 
       //If click 'no' then stop the code execution from here and 
       //if click 'yes' then go and execute code below.
      $(this).confirm.yes();

 });

插件

 jQuery.fn.confirm = function ()
 {
    jQuery.fn.confirm.yes = function (data)
     {
        //ajax calls
     };
    jQuery.fn.confirm.no = function ()
    {
       return "abcd";                 

    };
  };

Answer 1

我已用简单的模态框为您准备了一个示例。

＆＃13;

＆＃13;

$(document).ready(function() {
    
    //Show dialog Yes or No
    $('#proceed').on('click', function() {
         $('#dialog1').show();    
    });
             
    
     $.fn.confirm = function () {    
         return {
             yes: function () {        
                $('.answer').text('Clicked Yes');
                $('#dialog1').hide(); 
                 return "Yes"
     },
         no: function () {            
                $('.answer').text('Clicked No');
                $('#dialog1').hide(); 
               
             return "No"
     }
         }
     }
     
         $('#btn_yes').on('click', function() {
        $.fn.confirm().yes();
    });
    
    $('#btn_no').on('click', function() {
        $.fn.confirm().no();
    });
     
     
});

＆＃13;

body {
    padding:50px;
}
.popup {   
    display:none;
    width:300px;
    height:150px;
    padding:10px 20px;
    border:1px solid gray;
    box-shadow: 2px 2px 2px rgba(0,0,0,1);
    
}

.proceed {
    margin: 30px;
}

.answer {
    margin-top: 30px;
    font-size: 14px;
    background: yellow;
    color: black;    
}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="proceed">Show modal</button>

<div class="popup" id="dialog1">
    <p>Proceed to the next step?</p>
    <button id="btn_yes">Yes</button>
    <button id="btn_no">No</button>
</div>

<div class="answer">User answer</div>

＆＃13;

＆＃13;

＆＃13;