jqueryのポップアップダイアログボックス

Question

こんにちは私は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言いました。このライン、.attr("id", $(this).attr("data-dialog-id"))で
2. は、you'rは新しい<div>のid属性のdata-dialog-idが新しい<div>割り当てる属性 "つかむしようとしています。リンクdata-dialog-idの属性を新しい<div>に割り当てようとしていると思います。
3. ​​3210は冗長です。ダイアログ自体ではなく「リンクを削除」を意味する場合を除き、thisの代わりにlinkを使用します（fiddleを参照）。
4. "jQuery 1.7以降、.live（）メソッドは廃止予定です。イベントハンドラをアタッチするには.on()を使用してください。古いバージョンのjQueryでは.live（）よりも.delegate()が優先されます。
   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を注入することによって、仕事を得ることができました。除いて、これはまさにオリジナルのポストとしての私の作業コードは（

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

です：これにより

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

：

は、このラインを交換してみてください（私はjqueryの-1.7.1を使用しています）

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