Закрыть диалоговое окно изнутри AJAX загружено содержание

Question

У меня есть диалог JQuery пользовательского интерфейса, который загружает его содержимое с помощью AJAX:

$('#register').click(function(e) { 
    var tag = $('<div></div>'); 
    $.ajax({ 
     url: 'signup.html', 
     success: function(data) { 
      tag.html(data).dialog({modal: true}).dialog('open'); 
     } 
    }); 
    e.preventDefault(); 
    return false; 
}); 

У меня есть второй сценарий, в рамках содержания, которое, как предполагается, чтобы закрыть диалоговое окно, когда кнопка отправки нажимается

$(function() { 
    $('form #submit').click(function(e) { 
     $(this).parents('.ui-dialog').dialog('close'); 
     e.preventDefault(); 
     return false; 
    }); 
}); 

Когда я нажмите кнопку отправки, я получаю ошибку:

Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'

Что мне не хватает, чтобы я мог закрыть диалоговое окно из содержимого, загруженного через ajax?

Answer 1

Вы должны вызвать dialog('close') на элемент, где dialog('open') was called before. You're calling the function on $ ('щ-диалог'.) instead of $ ('.ui-dialog ...') `.

Вы должны определить идентификатор или класс для элемента тега в коде:

var tag = $('<div id="signup-id"></div>'); 

Затем найти правильный элемент в обработчик щелчка, как это:

$(this).parents('.ui-dialog').children('#signup-id').dialog('close'); 

Примечание: Вы можете найти #signup-id в обработчике кликов непосредственно как $(this).children('#signup-id'), если вы уверены, что signup.html никогда не содержит элемент с signup-id id.

Answer 2

Определить Пометив диалог в HTML

<div id="tag_dialog" style="display:none"> 
</div> 

затем документ готовый:

$(document).ready(function(){ 
    $('#tag_dialog').dialog({ 
     modal:true, 
     autoOpen:false, 
     //you could give some other options such as width, height ..... 
    }); 
    $('#register').click(function(e) { 
     $.ajax({ 
      url: 'signup.html', 
      success: function(data) { 
       $('#tag_dialog').html(data).dialog('open'); 
      } 
     }); 
     e.preventDefault(); 
     return false; 
    }); 
    $('form #submit').click(function(e) { 
     $('#tag_dialog').dialog('close'); 
     e.preventDefault(); 
     return false; 
    }); 
});