jQueryの - divの

Question

でリロードページ後のモーダルダイアログを通報します例に見てみましょう：

example.jsp：

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#Button1').button().click(function() { 
     $("#mainContent").load("example_1.jsp"); 
    }); 
    }); 
</script> 

<input id="Button1" type="button" value="RELOAD" /> 
<div id="mainContent"></div> 

がexample_1.jsp：

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#a").button().click(function() { 
     $("#a_form").dialog("open"); 
    }); 

    $("#a_form").dialog({ 
     autoOpen: false, 
     height: 480, 
     width: 625, 
     modal: true 
    }); 
    }); 
</script> 

<input id="a" type="button" value="MODAL" /> 
<div id="a_form" title="Modal Dialog" class="ui-widget"> 
    Hello! 
</div> 

を私は例をロード.jspと私はボタン "リロード"を押します。 次に、 "mainContent"に、モーダルダイアログを開く "MODAL"ボタンが表示されます。

しかし、もう一度「RELOAD」ボタンを押してから「MODAL」を押すと、MODAL DIALOGは表示されなくなります。 なぜですか？ どこが間違っていますか？

Answer 1

の理由：

<input id="a" type="button" value="MODAL" />

IDを使用しています。

もう一度ロードを実行すると、許可されていないid=aの別の入力が作成されます。

には、ロードする前に/主な内容はそれを空にしてからロードしようとリロードの代わりにID

Answer 2

example_1のスクリプトブロックが無視されるのは、ページに動的に読み込まれるためです。

だから、あなたが何をする必要があるかexample.jspと「＃A」の）（.live使用するために、そのスクリプトブロックを移動させることである代わりに、ある.click（）

$("#a").button().live("click", function() { 
    $("#a_form").dialog("open"); 
}); 

Answer 3

のクラス識別子を使用してみてください。

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#Button1').button().click(function() { 
     $("#mainContent").html('').load("example_1.jsp"); 
    }); 
    }); 
</script>