1

我正在使用 jquery-ui 选项卡和对话框功能。

每个选项卡在页面上都有一个按钮，可打开一个对话框。这适用于其中一个选项卡。但是，如果我转到第二个选项卡，则该按钮在那里不起作用。当我回到第一个选项卡时，对话框确实出现了，但问题是我注意到当我来回切换到第一个选项卡时，它会继续插入新的 div，而旧的 div 有 display:none 设置在他们身上。

我正在使用 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从 a 冒泡的任何内容.addButton，然后搜索其兄弟.addFormDialog。（我希望我听起来不会太混乱）

于 2012-09-09T16:08:11.973 回答