Javascript wird nicht ausgeführt, wenn ein JQuery-Dialogfeld beantwortet wird

Question

Ich habe ein Dialogfeld auf meiner Seite, das mit dem JQuery Dialog Widget erstellt wurde. Ich habe die zwei Tasten eingerichtet, um Funktionen zu haben, die auf verschiedene Knöpfe auf der Seite klicken, die Postbacks für die Seite auslösen und verschiedene Dinge tun werden. Wenn das Dialogfeld ist modal: false, wird das Dialogfeld die entsprechende Click Funktion ausführen, aber wenn ich modal gesetzt: true, wird die Schaltfläche nicht angeklickt werden, obwohl die Funktion eingegeben wird.

Ich denke, ich vermisse etwas über das modal: true tut im Hinblick auf die Ausführung der Funktionen mit den Tasten verbunden.

Unten ist mein JavaSript

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

Modal verhindert alle Arten von Veranstaltungen/und Aktionen auf dem Overlay selbst, und jeden DOM Ereignisse darunter. Aber normale Funktionsaufrufe, wie Ihr zu: clickButton() sind fein, wenn Sie eine Warnung am Anfang dieser Funktion stellen Sie sehen, dass es dort ankommt.

Das Problem das Sie haben, ist, dass Sie mit und click ein DOM-Element zu interagieren versuchen, die unter der modal ist (das ist, was hier verweigert wird)

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

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

Was ich immer tun, ist der Dialog schließen zuerst, dann führen Sie alle externen Skripts (vor allem, wenn ich weiß, dass sie versuchen, Dom Ereignisse auslösen). Dadurch haben Sie keine Probleme.

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); 
    } 
} 

Das winzige Verzögerung ist nur für den Fall, un-auffällig und lassen Sie Ihre Funktion ausführen, während modal:true halten

Answer 2

close Ereignis Versuchen:

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); 
     } 
});