jQuery UI Dialog nút

Question

khi tạo một hộp thoại với các nút như:

buttons: { 
      'button text': function(){        
       // do something 
      }, 

tôi phải truy cập vào các nút trong xử lý sự kiện nhấp chuột?

$(this) 

là ngữ cảnh/đối tượng jQuery của toàn bộ hộp thoại.

tôi nghi ngờ tôi phải được như vậy sáng tạo như

$(this).find('button').attr(...) 

để vô hiệu hóa một nút đó?

Answer 1

Các tài liệu cho dialog() nói:

Chìa khóa bất động sản là nội dung của nút . Giá trị là hàm gọi lại khi nút được nhấp . Ngữ cảnh của cuộc gọi lại là phần tử hội thoại; nếu bạn cần quyền truy cập vào nút, nó có sẵn làm mục tiêu của đối tượng sự kiện.

$('#myDialog').dialog({ 
    'title': 'My Dialog Header', 
    'buttons': { 
     'My Button': function(event) { 
      // here is the modification of the button 
      // opacity set to 25%, all events unbound 
      $(event.target).css({opacity: 0.25}).unbind(); 
     } 
    } 
}); 

Answer 2

Định dạng của các nút trong hộp thoại là một <button> với một <span> bên trong, như thế này:

<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"> 
    <span class="ui-button-text">Button text</span> 
</button> 

Vì vậy, khi bạn nhấp chuột, sự kiện thực tế click xảy ra trên đó <span> hoặc <button>, tùy thuộc vào phong cách của bạn (ví dụ: lề trên khoảng cách), để có được số <button> chỉ cần xử lý nút của bạn ngay cả khi bạn đã ở trên đó, như sau:

buttons: { 
    'button text': function(e){ 
    $(e.target).closest("button") //this is the button, do something with it :) 
    } 
} 

Here's a quick demo of this working