重新加载时附加内容的jquery选项卡

Question

我有一个jquery选项卡，它通过ajax和远程页面加载：

<div id="tabs" style="width:1200px" class="ui-tabs">
    <ul>
        <li><a href="/bugs/loadTab1">View</a></li>
        <li><a href="#tabs-2">Add Bug/Request</a></li>
    </ul>...


<script type="text/javascript">
    jQuery(function($) {
        $('#tabs').tabs({
            ajaxOptions: {
                error: function(xhr, status, index, anchor) {
                    $(anchor.hash).html("Couldn't load this tab.");
                },
                data: {},
                success: function(data, textStatus) {
                },
            }
        });
    });
</script>

在加载的页面中，有一行PHP数据和jquery框的表。问题是，当我通过.tabs("load",0);重新加载选项卡时，该表会重新加载，但会追加包含对话框的div。每次都会重新加载。

下面是返回到选项卡的页面。它似乎在结构上是正确的(没有不合适的div's，等等)。

<div style="height:300px;overflow:auto;width:1110px;">
    <img src="/shared/img/icons2.0/16x16/arrow_refresh.png" onclick="bug_updateList()" style="cursor:pointer" title='reload'>
</div>
<?php
$w=1;
foreach($bugs->result() as $row){
    switch($row->status){
        case 0:
         $status='<b class="stat-0">NEW</b>';
        break;
        case 1:
         $status='<b class="stat-1">REVIEW</b>';
        break;
        case 2:
         $status='<b class="stat-2">IN PROCESS</b>';
        break;
        case 3:
         $status='<b class="stat-3">TESTING</b>';
        break;
        case 4:
         $status='<b class="stat-4">COMPLETE</b>';
        break;
    }
    switch($row->importance){
        case 0:
         $import='<b class="imp-0">FEATURE</b>';
        break;
        case 1:
         $import='<b class="imp-1">VERY LOW</b>';
        break;
        case 2:
         $import='<b class="imp-2">LOW</b>';
        break;
        case 3:
         $import='<b class="imp-3">MEDIUM</b>';
        break;
        case 4:
         $import='<b class="imp-4">HIGH</b>';
        break;
        case 5:
         $import='<b class="imp-5">URGENT</b>';
        break;
    }
    $notes=$this->db->query('SELECT * FROM bugs_notes WHERE bug_id='.$row->id);
    echo"
        <div id='dialog_$w' title='$row->description'>
            <p>$row->detail</p>
            <hr>
            <fieldset><legend>Notes</legend>
            <div id='notes-$w'>";
            foreach($notes->result() as $nrow){
                echo '
                <div style="border-bottom:1px dotted #000;width:98%;padding:5px"><b>'.$nrow->user.'</b>: '.$nrow->note.'</div>';
            }
            echo "

                <hr>
                <div id='addNote'>
                    <label for='noteInput'>Add note:</label>
                    <form name='bugs_note-$w'>
                    <input type='text' id='bugs_note-$w' name='note' size='60' />
                    <input type='hidden' name='bug_id' value='$row->id' />
                    <input type='button' value='add note' onclick='bug_addNote(\"bugs_note-$w\",$row->id,\"notes-$w\")' />
                    </form>
                </div>
            </div>
            </fieldset>
            <hr>
            <fieldset><legend>Update Status</legend>
            <div id='updateStatus-$w'>
                Current status:<span id='curStatus-$w'>$status</span><br><br>
                <form name='status-radio-$w' id='status-radio-$w'>
                    <span style='border:1px dotted #666;padding:3px;margin-right:3px'>
                        <label for='radio-new-$w'>New</label>
                            <input type='radio' id='radio-new-$w' name='status' value='0'>
                    </span>
                    <span style='border:1px dotted #666;padding:3px;margin-right:3px'>
                        <label for='radio-rev-$w'>Review</label>
                            <input type='radio' id='radio-rev-$w' name='status' value='1'>
                    </span>
                    <span style='border:1px dotted #666;padding:3px;margin-right:3px'>
                        <label for='radio-proc-$w'>In process</label>
                            <input type='radio' id='radio-proc-$w' name='status' value='2'>
                    </span>
                    <span style='border:1px dotted #666;padding:3px;margin-right:3px'>
                        <label for='radio-test-$w'>Testing</label>
                            <input type='radio' id='radio-test-$w' name='status' value='3'>
                    </span>
                    <span style='border:1px dotted #666;padding:3px;margin-right:3px'>
                        <label for='radio-comp-$w'>Complete</label>
                            <input type='radio' id='radio-comp-$w' name='status' value='4'>
                    </span>
                    <input type='button' style='float:right' value='update status' onclick='bug_updateStatus(\"status-radio-$w\",$row->id,$i,\"curStatus-$w\",\"dialog_$w\")'>
                </form>
            </div>
            </fieldset>

            <fieldset><legend>Update Importance</legend>
            <div id='updateImportance-$w'>
                Current importance:<span id='curImport-$w'>$import</span><br><br>
                <form name='status-import-$w' id='status-import-$w'>
                    <span style='border:1px dotted #666;padding:3px;margin-right:3px'>
                        <label for='radio-fet-$w'>Feature</label>
                            <input type='radio' id='radio-new-$w' name='import' value='0'>
                    </span>
                    <span style='border:1px dotted #666;padding:3px;margin-right:3px'>
                        <label for='radio-vlow-$w'>Very Low</label>
                            <input type='radio' id='radio-vlow-$w' name='import' value='1'>
                    </span>
                    <span style='border:1px dotted #666;padding:3px;margin-right:3px'>
                        <label for='radio-low-$w'>Low</label>
                            <input type='radio' id='radio-low-$w' name='import' value='2'>
                    </span>
                    <span style='border:1px dotted #666;padding:3px;margin-right:3px'>
                        <label for='radio-med-$w'>Medium</label>
                            <input type='radio' id='radio-med-$w' name='import' value='3'>
                    </span>
                    <span style='border:1px dotted #666;padding:3px;margin-right:3px'>
                        <label for='radio-high-$w'>High</label>
                            <input type='radio' id='radio-high-$w' name='import' value='4'>
                    </span>
                    <span style='border:1px dotted #666;padding:3px;margin-right:3px'>
                        <label for='radio-urg-$w'>Urgent</label>
                            <input type='radio' id='radio-urg-$w' name='import' value='5'>
                    </span>
                    <input type='button' style='float:right' value='update importance' onclick='bug_updateImport(\"status-import-$w\",$row->id,$i,\"curImport-$w\",\"dialog_$w\")'>


                </form>
            </div>
            </fieldset>
            <div align='center'><br>
                <input type='button' value='delete' onclick='bug_delete($row->id,\"dialog_$w\",\"tr-$w\")'>
                <input type='button' value='close' onclick='bug_dialog_close(\"dialog_$w\")'>
                <br>asdf-dialog_$w</br>
            </div>
        </div>";
        $w++;
}
?>

<script>
<?php
$ee=1;
foreach($bugs->result() as $rr){
    echo "jQuery(\"#dialog_$ee\").dialog({autoOpen:false,width:850,height:550});\n";
    $ee++;
}
?>
</script>

我不明白为什么.tabs("load",0)会附加数据.任何帮助都将不胜感激..。

编辑：

这太让人沮丧了。我尝试了3种不同的解决方案，包括分别加载清单和对话框，并且只刷新合适的内容。但是，每当我需要刷新对话框时，它都会追加它们。我检查了transport.responseText.length，只是为了确保PHP没有吐出更多的数据，但它是检查出来的。标签插件正在做一些事情来附加这些东西，而我无法找到如何替换it.

Answer 1

http://blog.nemikor.com/category/jquery-ui/jquery-ui-dialog/

我想这可能是有关联的。