單擊jQuery對話框中的按鈕時出錯

Question

單擊“拒絕請求”時，可以顯示對話框，但是單擊“取消”或“確定”時，對話框不會關閉，並且在控制台中看到錯誤。 “未捕獲的TypeError：無法讀取未定義的屬性'apply'”

HTML：

<button id="btn-reject" class="btn btn-danger" type="submit" style="float: right;">Reject Request</button>
    <div id='reject-dialog' title='Confirmation Required'>Reject Request?</div>

JQuery的：

<script type="text/javascript">
    $(document).ready(function () {
       $("#reject-dialog").dialog({
            autoOpen: false,
            modal: true,                    
            buttons: {
                "Confirm": {
                    text: "OK",
                    id: "confirm-reject"
                },
                "Cancel": {
                    text: "Cancel",
                    id: "cancel-reject"
                }
            }
       });
       $("#btn-reject").click(function (e) {
           e.preventDefault();

           $("#reject-dialog").dialog('open');
       });
       $('#cancel-reject').click(function () {
           $("#reject-dialog").dialog('close');
           console.log('confirm');
       });
       $('#confirm-reject').click(function () {
           $("#reject-dialog").dialog('close');
           console.log('reject');
       });
});  //dom

</script>

jQuery版本：

Answer 1

您綁定到document.ready上尚不存在的按鈕。

相反，您可以告訴對話框在創建按鈕時觸發什么回調。

更新：

根據Jquery-ui文檔， 對話框按鈕選項采用以下兩種格式之一：

1）對象：鍵是按鈕標簽，值是單擊關聯的按鈕時的回調。

2）數組：數組的每個元素都必須是一個對象，該對象定義要在按鈕上設置的屬性，屬性和事件處理程序。

我更新了代碼以反映這一點。

碼

<script type="text/javascript">
$(document).ready(function () {
   var dialogDiv = $("#reject-dialog");
   dialogDiv.dialog({
        autoOpen: false,
        modal: true,                    
        buttons: [
            {
                text: "OK",
                id: "confirm-reject",
                click: function() {
                    dialogDiv.dialog("close");
                      console.log('confirm');
                }
            },
            {
                text: "Cancel",
                id: "cancel-reject",
                click: function(){
                    dialogDiv.dialog("close");
                    console.log('reject');
                }
            }
       ]
   });
   $("#btn-reject").click(function (e) {
       e.preventDefault();

       dialogDiv.dialog('open');
   });
});  //dom

</script>

Answer 2

您需要使用.on()的事件委托，因為執行代碼時按鈕不存在。

例如，更改：

$('#cancel-reject').click(function () {
    $("#reject-dialog").dialog('close');
    console.log('confirm');
});

至：

$(document).on('click','#cancel-reject', function () {
    $("#reject-dialog").dialog('close');
    console.log('confirm');
});

jsFiddle示例

理想情況下，您希望綁定到頁面上比document更近的元素，以提高性能。

Answer 3

您甚至需要在創建對話框之后綁定單擊處理程序，還需要告知單擊功能。 我認為發生這種情況是因為Jquery嘗試通過應用本機js函數執行屬性單擊，並且，如果您未定義它，則js嘗試在未定義的情況下執行apply。

因此，我建議您定義一個空函數（或jQuery.noop）：

"Confirm": {
    text: "OK",
    id: "confirm-reject",
    click: function(){} // or jQuery.noop()
}