всплывающее диалоговое окно jQuery

Question

hey frenz У меня проблема с диалоговым окном jquery-ui. Проблема заключается в том, что когда я закрываю диалоговое окно, а затем я нажимаю на ссылку, которая его запускает, она не всплывает снова, если я не обновляю страницу или не сохраняю никаких данных в диалоговом окне.

Код я использовал это:

<script type="text/javascript"> 

    $(document).ready(function() { 
     $(".openDialog").live("click", function (e) { 
      e.preventDefault(); 

      $("<div></div>") 
        .addClass("dialog") 
        .attr("id", $(this).attr("data-dialog-id")) 
        .appendTo("body") 
        .dialog({ 
         close: function() { 
          $(this).remove(); 
         }, 
         modal: true 
        }) 
        .load(this.href); 
     }); 

     $(".close").live("click", function (e) { 
      e.preventDefault(); 
      $(this).closest(".dialog").dialog("close"); 
     }); 
    }); 
</script> 

Answer 1

1. Что @MattBradley сказал.
2. В этой линии, .attr("id", $(this).attr("data-dialog-id")), you'r пытается захватить новый <div> «ы data-dialog-id атрибут, назначая новые <div>» ы атрибут id. Я уверен, что вы хотели присвоить атрибут link data-dialog-id новым <div>.
3. close: function() { $(this).remove(); } является избыточным. Если вы не хотите «удалить ссылку», а не сам диалог, в этом случае вы должны использовать link вместо this (см. fiddle).
4. «В отношении jQuery 1.7 метод .live() устарел. Используйте команду .on() для присоединения обработчиков событий. Пользователи более старых версий jQuery должны использовать .delegate(), предпочитая .live()."
   Взято из документации jQuery live().

---

$('body').on('click', '.openDialog', function (e) { 
    e.preventDefault(); 

    var link = $(this); 

    $("<div></div>") 
     .addClass("dialog") 
     .attr("id", $(link).attr("data-dialog-id")) 
     .appendTo("body") 
     .dialog({ 
      modal: true 
     }) 
     .load($(link).attr('href'), { 
      html: "<p>Text echoed back to request</p>" 
     }); 
}); 

$('body').on("click", '.close', function (e) { 
    e.preventDefault(); 
    $(this).closest(".dialog").dialog("close"); 
}); 

Демо здесь:http://jsfiddle.net/Ag6wj/

Answer 2

Я был в состоянии заставить его работать, вводя другой DIV с песочными часами/прялка «Пожалуйста, подождите» загрузки изображения. (Я использую JQuery-1.7.1)

Попробуйте заменить эту строку:

$("<div></div>") 

С этим:

$("<div><div style='text-align: center'><img src='@Url.Content("~/Content/images/loading.gif")' alt='Please Wait...' width='100px'/></div></div>") 

Это мой рабочий код (точно так, как исходное сообщение, за исключением для одной строки):

// these are for the popup dialogs 
// need to use live instead of click because object doesnt exist on ready and will give an objectexpected 
$(".openDialog, .editDialog").live("click", function(e) { 
    e.preventDefault(); 

    // this div is duplicate of 'loading' div below 
    $("<div><div style='text-align: center'><img src='@Url.Content("~/Content/images/loading.gif")' alt='Please Wait...' width='100px'/></div></div>") 
     .addClass("dialog") 
     .attr("id", $(this).attr("data-dialog-id")) 
     .appendTo("body") 
     .dialog({ 
      // NOTE: This is where the size of the popup window is set 
      width: 800, 
      position: 'top', 
      title: $(this).attr("data-dialog-title"), 
      close: function() { $(this).remove(); }, 
      modal: true 
     }) 
     .load(this.href); 
});