1

jquery-uiタブとダイアログ機能を使用しています。

各タブには、ダイアログを開くボタンがページにあります。これは、タブの1つで機能します。ただし、2番目のタブに移動すると、ボタンが機能しません。最初のタブに戻ると、ダイアログは表示されますが、問題は、最初のタブに切り替えて、古いdivにdisplay：noneが設定されている間、新しいdivを挿入し続けることに気付くということです。

私はJSPを使用してこれを行っています。再利用可能なjspは次のようになります。

<script>
$(function() {
    var formData = null;
    $.ajax({
        url : "addFormGenerator.html",
        success : function(data) {
            formData = data;
            $("#addFormDialog").html(data);
            $("#addFormDialog").dialog({
                autoOpen : false,
                height : 300,
                width : 350,
                modal : true,
                buttons : {
                    "Add" : function() {
                        $(this).dialog("close");
                    },
                    Cancel : function() {
                        $(this).dialog("close");
                    }
                },
                close : function() {
                }
            });
        }
    });
    $("#addButton").button().click(function() {
        $("#addFormDialog").html(formData);
        $("#addFormDialog").dialog("open");
    });
});
</script>

<button id="addButton">Click here to Add New</button>
<div id="addFormDialog" title="Add New"></div>

このjspフラグメントは、他のjspページにも含まれています。タブを切り替えるときに、古いボタンがガベージコレクションされると想定していました。

問題を理解して修正するのを手伝ってもらえますか？

4

1 に答える 1

2

jspの応答から次の部分をレンダリングする必要はありません

<div class="addFormDialog" title="Add New"></div>

$("#addButton").button().click(function() {
        $("#addFormDialog").html(formData);
        $("#addFormDialog").dialog("open");
});

次のものを用意してください。理想的にはクラス名を使用し、IDを重複させないでください。

<button class="addButton">Click here to Add New</button>

更新：

私はまだあなたがユニークなIDを必要としないと思います-

<div id="tabs-container">

    <!-- tabs here -- >

    <-- let's say this is tab#1 -->
       <button class="addButton">Click here to Add New</button>
       <div class="addFormDialog" title="Add New"></div>
    <!-- tab1 -->
</div>


$('#tabs-container').on('click' , '.addButton', function(){
    var dialogContent = $(this).siblings('.addFormDialog');
    //now call .dialog({..});  or whatever you need
});

clickこのようにして、からバブルアップするものをリッスンし.addButton、その兄弟を検索するワンクリックハンドラーをバインドします.addFormDialog。（私はあまり混乱していないように聞こえることを願っています）

于 2012-09-09T16:08:11.973 に答える