如何檢測單擊jQuery UI對話框的（X）關閉按鈕，與dialogclose/dialogbeforeclose事件分開？

我希望能夠檢測到正在單擊的jQuery UI對話的（x）關閉按鈕，但我不想使用事件（因爲我相信無論對話如何，這些事件都會觸發）關門了）。如何檢測單擊jQuery UI對話框的（X）關閉按鈕，與dialogclose/dialogbeforeclose事件分開？

我試過$(".ui-dialog-titlebar-close").live("click")，但這似乎不起作用。

我該怎麼做？

示例代碼:(調試器在對話關閉時不啓動）。

<!DOCTYPE html> 
<html> 
<head> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script> 

    <script> 
    $(document).ready(function() { 
    $("#dialog").dialog(); 

    $(".ui-dialog-titlebar-close").live("click", function() { 
     debugger; // ** clicking the close button doesn't get to here.** 
     }); 
    }); 
    </script> 
</head> 

<div id="dialog" title="Dialog Title">I'm in a dialog</div> 

</body> 
</html>

來源

2011-10-28 John Carter

使用'create'事件綁定的功能 –

你可以做什麼JAAulde建議，或避免跟蹤結合，並使用create事件：

$(document).ready(function() { 
    $('#dialog').dialog({ 
     create: function() { 
      $(this).closest('div.ui-dialog') 
        .find('.ui-dialog-titlebar-close') 
        .click(function(e) { 
         alert('hi'); 
         e.preventDefault(); 
        }); 
     } 
    }); 
});

來源

2011-10-28 01:39:39

啊，我知道有不得不說是一個'create'樣方法/事件，但我沒有費心尋找它。 +1，你應該接受我的答案！ – JAAulde

只是好奇，你有什麼想法爲什麼'$（「。ui-dialog-titlebar-close」）。live（「click」）'不會觸發？如果改變了事件像它火'mouseover' – Quincy

我不完全知道這可是'live'結合在DOM根，在'click'不泡沫了，因爲小部件已經觸發此元素上執行的情況下而鏈不連續，更復雜的調試可以揭開原因 –

非常好的問題

它的工作，如果你只用點擊

$(".ui-dialog-titlebar-close").click(function() { 
     debugger; 
     });

但我敢肯定有對生活下去的理由？

我會繼續尋找

爲什麼你不想使用它？

$('.selector').bind('dialogclose', function(event, ui) { 
    debugger; 
});

來源

2011-10-28 01:23:32 GregM

這很適合我想要的東西 - 綁定的方法。謝謝！ – hynsey

我必須同意格雷格姆 - 爲什麼不是一個簡單的「綁定」在這個頁面上的所有答案，這是唯一一個爲我工作的人。這可能與我的對話是動態創建的事實有關。 – TrueBlue

您不想通過.live等要做到這一點，你最終會結合你每次創建對話框的X。你要綁定到特定的對話框的特定目的X，所以......

注意在您閱讀時，注意，這個完美的作品，但過於複雜。 Kris Ivanov發佈了更正確，更簡潔，更合適的答案。 End Note

在對話框的打開方法中，檢查是否已將點擊綁定到'X'。如果沒有，你有，然後找到你的實例的「X」和標誌其綁定：

$(function() 
{ 
    $('#dialog').dialog({ 
     open: function() //runs every time this dialog is opened 
     { 
      var $dialog = $(this); 

      if(! $dialog.data('titleCloseBound')) 
      { 
       $dialog 
        .data('titleCloseBound', true) //flag as already bound 
        .closest('div.ui-dialog') //traverse up to the outer dialog wrapper 
         .find('a.ui-dialog-titlebar-close') //search within it for the X 
          .bind('click', function(e) //bind it 
          { 
           alert('hi'); 
           e.preventDefault(); 
          }); 
      } 
     } 
    }); 
});

您需要檢查它是否已經綁定，因爲open每一個打開的對話框中時運行，因此多開將重新綁定如果沒有它，反覆使用相同的功能。

演示：http://jsfiddle.net/XM2FH/

來源

2011-10-28 01:27:09 JAAulde

不是很有效跟蹤的結合，只是使用'create'事件，而不是'open' –

@KrisIvanov笑，是啊，看到我給你的回答和評論我的筆記添加到我的。 – JAAulde

是的，沒看到SRY，沒有降級，還是有用的信息 –

我知道這是一個老問題，以及OP表示他不想在beforeClose之前使用，但原因是因爲它總是會觸發，即使對於X以外的事情也是如此。但是，我注意到這裏的技巧不允許我阻止對話框關閉（我想要證實如果有未保存的更改，請打開m窗口）。如果我們在這裏使用技巧，在使用beforeClose之前，我們可以達到預期的效果，但可以取消。我用過：

beforeClose: function (e, ui) { 
    if ($(e.currentTarget).hasClass('ui-dialog-titlebar-close') && whateverMyConditionIs) 
     e.preventDefault(); 
}

認爲它可能會幫助別人！

來源

2015-04-28 13:47:12 dman2306

如何檢測單擊jQuery UI對話框的（X）關閉按鈕，與dialogclose/dialogbeforeclose事件分開？

回答

相關問題