Question

在第一个按钮上点击我正在验证某些文本框然后调用Confirm（）来显示确认框。我希望它返回true给调用单击确定时功能，控件应返回UI继续进行。但是这没有发生。它停留在同一页面

function ValidateDetailsForItemUPC() {
  var retvalue = true;    
  if (retvalue)
    retvalue=Confirm('Go to Google', 'Are you sure you want to visit Google', 'Yes', 'Cancel', "https://www.google.com.eg"); /*change*/   
  return retvalue;    
}

function Confirm(title, msg, $true, $false, $link) { /*change*/
  var retvalue = false;
  var $content = "<div class='dialog-ovelay'>" +
                "<div class='dialog'><header>" +
                 " <h3> " + title + " </h3> " +
                 "<i class='fa fa-close'></i>" +
             "</header>" +
             "<div class='dialog-msg'>" +
                 " <p> " + msg + " </p> " +
             "</div>" +
             "<footer>" +
                 "<div class='controls'>" +
                     " <button class='button button-danger doAction'      onclick='return OkClick()'>" + $true + "</button> " +
                     " <button class='button button-default cancelAction'>" + $false + "</button> " +
                 "</div>" +
             "</footer>" +
          "</div>" +
        "</div>";
$('body').prepend($content);

$('.cancelAction, .fa-close').click(function () {
    $(this).parents('.dialog-ovelay').fadeOut(500, function () {
        $(this).remove();
    });
    retvalue = false;
});
return retvalue
}
function OkClick()
{
  alert("true");            
}

Html code
 <div id="dialog-confirm" title="ALERT 01">
            <p style="text-align:center;"><span class="ui-icon ui-icon-alert" style="display:inline-block; margin:0px 7px 0px 0px;"></span>Are you sure?</p>
</div>

Answer 1

查看我的基于ES6承诺的解决方案。希望这会有所帮助。

function ValidateDetailsForItemUPC() {
    Confirm('Go to Google', 'Are you sure you want to visit Google', 'Yes', 'Cancel', "https://www.google.com.eg")
        .then(() => {
            alert('user clicked yes');
            // Redirect to another page here
            // ...
        })
        .catch(() => {
            alert('user clicked cancel');
        });
}

function Confirm(title, msg, $true, $false, $link) {
    var $content = "<div class='dialog-ovelay'>" +
                "<div class='dialog'><header>" +
                 " <h3> " + title + " </h3> " +
                 "<i class='fa fa-close'></i>" +
             "</header>" +
             "<div class='dialog-msg'>" +
                 " <p> " + msg + " </p> " +
             "</div>" +
             "<footer>" +
                 "<div class='controls'>" +
                     " <button class='button button-danger doAction'>" + $true + "</button> " +
                     " <button class='button button-default cancelAction'>" + $false + "</button> " +
                 "</div>" +
             "</footer>" +
          "</div>" +
        "</div>";
    $('body').prepend($content);

    return new Promise((resolve, reject) => {
        $('.doAction').click(function() {
            $(this).parents('.dialog-ovelay').remove();
            resolve();
        });

        $('.cancelAction, .fa-close').click(function () {
            $(this).parents('.dialog-ovelay').fadeOut(500, function () {
                $(this).remove();
                reject();
            });
        });
    });
}

ValidateDetailsForItemUPC();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

您提供的代码似乎不完整。但是你拥有的东西应该做这样的小提琴。

https://jsfiddle.net/tinkersncody/k28usg8q/1/

 <input id="validateRequest" type="button" value="validate" />

$('#validateRequest').on('click.validate',function(){
    return va();
});


function va(){
    if (retvalue){ retvalue=
        Confirm('Go to Google', 'Are ... Google', 'Yes', 'Cancel', "https://www.google.com.eg");
    }
    return retvalue;
}

function cancelEvent() {
    $(this).parents('.dialog-ovelay').fadeOut(500, function () {
        $(this).remove();
    });
    retvalue = false;
    return retvalue
}

function OkClick() {
    alert("true");
    return true;
}

function Confirm(title, msg, $true, $false, $link) { 
    var retvalue = false;
    var $content = $("<div class='dialog-ovelay'>" +
              "<div class='dialog'><header>" +
               " <h3> " + title + " </h3> " +
               "<i class='fa fa-close'></i>" +
           "</header>" +
           "<div class='dialog-msg'>" +
               " <p> " + msg + " </p> " +
           "</div>" +
           "<footer>" +
               "<div class='controls'>" +
                   " <button class='button button-danger doAction'>" + $true + "</button> " +
                   " <button class='button button-default cancelAction'>" + $false + "</button> " +
               "</div>" +
           "</footer>" +
        "</div>" +
      "</div>");
    $('body').prepend($content);

    $(document).find('.cancelAction, .fa-close').on('click.gAction',cancelEvent);
    $(document).find('.doAction').on('click.gAction',OkClick);
}

单击确定后，从自定义确认框返回true

2 个答案: