jQuery .load duplicating div

Question

我试图刷新div并最终重复div，即;一个在另一个里面。我目前正在使用jQuery，Struts2和Struts2 jQuery插件。

目前正在做什么：

<div id="nameVolumeWrapper....>
    <div id="nameVolumeWrapper....>
    </div>
</div>

刷新脚本

<script>
    function reloadContent() {
        $('#nameVolumeWrapper').load('${jsonAction} #nameVolumeWrapper');
    }
</script>

调用刷新脚本的元素

<sj:select href="%{jsonURL}" 
                 id="utility" 
               name="selectedUtility" 
               list="utilityList" 
          headerKey="-1" 
        headerValue="Please Select A Utility"
           onchange="reloadContent()"
     onChangeTopics="reloadSecondList"/>

div我试图重新加载

<sj:div id="nameVolumeWrapper" listenTopics="reloadSecondList" 
        effect="pulsate" effectDuration="1000"
        cssStyle="height:250px; overflow-y: scroll; width:910px; 
        margin-left:auto; margin-right:auto;">
<table id="pricingInput" class="footable" style="width: 800px; 
        table-layout: fixed; margin-left: auto; margin-right: auto; 
        margin-bottom:50px;">
    <thead>
        <tr>
            <th style="text-align: center;">Account Name</th>
            <th style="text-align: center;">Annual kWh Volume</th>
            <th style="text-align: center">Rate Class</th>
            <th style="text-align: center;">Add Another?</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><s:textfield name="nameHolder" /></td>
            <td><s:textfield name="volumeHolder" /></td>
            <s:url id="jsonURL" action="jsonAction" namespace="/"/>
                <td>
                    <sj:select href="%{jsonURL}" 
                                 id="rate_class" name="rateHolder" 
                               list="rateClassList" 
                          headerKey="-1" 
                        headerValue="Please Select a RateClass"
                       reloadTopics="reloadSecondList"/>
                </td>
            <td>
                <input type="button" class="addButton" value="Add" />
                <input type="button" value="Delete" onclick="deleteRow(this)">
            </td>
        </tr>
    </tbody>                                    
</table>

长话短说，如何修改我的javascript或div定义以使div在调用javascript时不会重复？

Answer 1

你可以这样做：

$.get("${jsonAction} #nameVolumeWrapper", function(data) {
    $('#nameVolumeWrapper').html($(data).html());
});

如果这不起作用，你可以这样做：

var wrapper = $('#nameVolumeWrapper');
wrapper.load('${jsonAction} #nameVolumeWrapper', function() {
   wrapper.children('#nameVolumeWrapper').unwrap();
});