確認ダイアログが表示された後、適切な処置をとる

Question

jQuery UIで確認ダイアログが表示されます。
私は（yesまたはnoか）のユーザーの反応後に適切な行動を取るしようとしている：私の場合は

$("button").click(function() { 
    if (showDialog('Do you want to continue?')) { 
    console.log("yes"); 
    } else { 
    console.log("no"); 
    } 
}); 

function showDialog(message) { 
    var dfd = new $.Deferred(); 
    $("#dialog").dialog({ 
    modal: true, 
    buttons: { 
     "Yes": function() { 
     dfd.resolve(); 
     $(this).dialog("close"); 
     }, 
     "No": function() { 
     $(this).dialog("close"); 
     } 
    } 
    }); 
    $("#dialog").html(message); 
} 

、私はいつもnoを取得します。

また、noは、ボタンをクリックする前に表示されます。だから私はこれが非同期だと仮定します。それを防ぐ方法はありますか？

Here is a fiddle。

Answer 1

あなたが延期と正しい道にしているが、それが解決するか拒否するために、あなたが実際に聞いていなかった。ここで

 $("button").click(function() { 
      showDialog('Do you want to continue?').then(function() { 
       console.log("yes"); 
      }, function() { 
       console.log("no"); 
      }) 
     }); 

     function showDialog(message) { 
      var dfd = new $.Deferred(); 
      $("#dialog").dialog({ 
       modal: true, 
       buttons: { 
        "Yes": function() { 
         dfd.resolve(); 
         $(this).dialog("close"); 
        }, 
        "No": function() { 
         dfd.reject(); 
         $(this).dialog("close"); 
        } 
       } 
      }); 
      $("#dialog").html(message); 
      return dfd; 
     } 

あなたのフィドルは仕事に更新されましたhttps://jsfiddle.net/v86bc028/1/

編集 - 秒のフィドルは両方のボタンのために使用される解決を示します https://jsfiddle.net/35edpgxp/1/

Answer 2

$.Deferredを使用する必要はありません。また、ユーザーが「はい」または「いいえ」ボタンを押したときに発生するロジックは、「ボタン」設定オプションで提供される機能に含まれている必要があります。このように：

$("button").click(function() { 
 
    showDialog('Do you want to continue?'); 
 
}); 
 

 
function showDialog(message) { 
 
    $("#dialog").dialog({ 
 
    modal: true, 
 
    buttons: { 
 
     "Yes": function() { 
 
     \t console.log('yes'); 
 
     $(this).dialog("close"); 
 
     }, 
 
     "No": function() { 
 
     console.log('no'); 
 
     $(this).dialog("close"); 
 
     } 
 
    } 
 
    }); 
 
    $("#dialog").html(message); 
 
}