Javascript không thực hiện khi trả lời Hộp thoại JQuery

Question

Tôi có một hộp thoại trên trang của mình được tạo bằng cách sử dụng Tiện ích hộp thoại JQuery. Tôi đã thiết lập hai nút để có các chức năng sẽ nhấp vào các nút khác nhau trên trang sẽ kích hoạt đăng lại cho trang và thực hiện nhiều việc khác nhau. Khi hộp thoại là modal: false, hộp thoại sẽ thực hiện liên quan clickButton chức năng, tuy nhiên, khi tôi đặt modal: true, nút sẽ không được nhấn vào, mặc dù hàm được nhập vào.

Tôi đoán tôi đang thiếu một cái gì đó về những gì phương thức: true không liên quan đến việc thực hiện các chức năng liên kết với các nút.

Dưới đây là JavaScript của tôi

function displayQuoteToCashMessage() { 
     //this is where we do that alert for the QuoteToCash request stuff 
     $("#<%=divQuoteToCashAlert.ClientId %>").show(); 
     $("#<%=divQuoteToCashAlert.ClientId %>").dialog({ 
      modal: false, 
      resizable: false, 
      buttons: { 
       "Ok": function() { 
        //save confirmations 
        clickButton(true); 
        $(this).dialog("close"); 
       }, 
       "No": function() { 
        clickButton(false); 
        $(this).dialog("close"); 
       } 
      } 
     });   
    } 

    function clickButton(b) { 
     //do something with b 
     document.getElementById(btnSave).click() 
    }; 

Answer 1

phương thức ngăn chặn tất cả các loại sự kiện/và hành động, trên lớp phủ chính nó, và bất kỳ DOM sự kiện dưới nó. Nhưng các cuộc gọi chức năng thông thường, như của bạn tới: clickButton() là phạt, nếu bạn đặt cảnh báo ở đầu hàm đó, bạn sẽ thấy cảnh báo ở đó.

Vấn đề bạn đang gặp phải, là bạn đang cố gắng để tương tác với và click một phần tử DOM đó là dưới phương thức (đó là những gì đã được phủ nhận đây)

// It gets here without a problem 
function clickButton(b) { 

    // But this event here is what *modal* is preventing. 
    document.getElementById(btnSave).click(); 
} 

Những gì tôi luôn luôn làm, hãy đóng hộp thoại trước tiên, rồi thực hiện bất kỳ tập lệnh bên ngoài nào (đặc biệt nếu tôi biết chúng cố gắng kích hoạt sự kiện dom). Bằng cách này, bạn sẽ không có vấn đề gì.

jsFiddle DEMO

buttons: { 
    "Ok": function() { 

    $(this).dialog('close'); 

    // now wait a 100 ms for it to fully close 
    // this is mainly for the slow browsers, "just in case" really 

    setTimeout(function() { 
     clickButton(); // now we call your function (knowing the modal is gone) 
    }, 100); 
    } 
} 

Đó chậm trễ tí hon chỉ trong trường hợp, un-đáng chú ý, và sẽ cho phép bạn chạy chức năng của bạn trong khi vẫn giữ modal:true

Answer 2

Hãy thử close sự kiện:

var okButtonWasClicked = false; 
$("#<%=divQuoteToCashAlert.ClientId %>").dialog({ 
    buttons: { 
     "Ok": function() { 
      okButtonWasClicked = true; 
      $(this).dialog("close"); 
     }, 
     "No": function() { 
      okButtonWasClicked = false; 
      $(this).dialog("close"); 
     } 
    }, 
    close: function() { 
     if(okButtonWasClicked) { 
      clickButton(true); 
     } else { 
      clickButton(false); 
     } 
});