为什么我的jQuery对话框和数据表不能在同一页面中工作？

Question

我正在构建一个asp.net mvc 2应用程序。我在一个页面中放了两个数据表以及一个图像，单击该图像会打开一个对话框。数据表工作正常，但对话框不会弹出。

然而，当我将搜索图像放在没有数据表的页面中时，当我点击它时，它运行良好。

这是我的形象：

<a href="#">
   <img id="agent-bill-id" src="<%=Url.Content("~/Content/Images/search_icon.gif")%>" />  
</a>

以下是我的数据表代码：

<script type="text/javascript">

    var ratesandcharges1;

    $(document).ready(function() {

        /* Init the table*/
        $("#ratesandcharges1").dataTable({
            "bRetrieve": true,
            "bFilter": false,
            "bSortClasses": false,
            "bLengthChange": false,
            "bPaginate": true,
            "bInfo": false,
            "bJQueryUI": true,
            "bAutoWidth": false,
            "aaSorting": [[2, "desc"]],
            "aoColumns": [
            null,
            null,
            null,
            null]
        });

        ratesandcharges1.fnDraw();

    });
</script>

<div id="ratesandcharges1Wrapper" style="width: 650px;"> 

    <table id="ratesandcharges1" class="grid" >
        <thead>
            <!--Header row-->
            <tr>
                <th>Code</th>
                <th>Day/Tag 1-2</th>
                <th>Day/Tag 3-5</th>
                <th>Day/Tag 6-999</th>
            </tr>
        </thead>
        <!--Data row-->
        <tbody>
            <tr>
                <td>KM/Miles (Ext. KM Charge: 0)</td>
                <td>99999</td>
                <td>99999</td>
                <td>99999</td>
            </tr>
            <tr>
                <td>VW Polo</td>
                <td>65.00</td>
                <td>55.00</td>
                <td>45.00</td>
            </tr>
        </tbody>
    </table>
</div>    

<div class="row">
</div>

<div class="separator">
</div>

<script type="text/javascript">

    var ratesandcharges2;

    $(document).ready(function() {

        /* Init the table*/
        $("#ratesandcharges2").dataTable({
            "bRetrieve": true,
            "bFilter": false,
            "bSortClasses": false,
            "bLengthChange": false,
            "bPaginate": true,
            "bInfo": false,
            "bJQueryUI": true,
            "bAutoWidth": false,
            "aaSorting": [[2, "desc"]],
            "aoColumns": [
                null,
                null,
                null,
                null,
                null,
                null,
                null,
                null,
                null]
        });

        ratesandcharges2.fnDraw();

    });
</script>

<!--not for popups-->
<div id="ratesandcharges2Wrapper" style="width: 650px;"> 

    <table id="ratesandcharges2" class="grid" >
        <thead>
            <!--Header row-->
            <tr>
                <th>Charge Code</th>
                <th>Rates</th>
                <th>Quantity</th>
                <th>Total Charge</th>
                <th>VAT %</th>
                <th>Calc. Type</th>
                <th>Paid By</th>
                <th>From</th>
                <th>To</th>
             </tr>
        </thead>
        <!--Data row-->
        <tbody>
            <tr>
                <td>Day/Tag</td>
                <td>55.00</td>
                <td>3.00</td>
                <td>165.00</td>
                <td>20.00</td>
                <td>Rental Time</td>
                <td>Bill-to/Agent</td>
                <td>5/11/2010</td>
                <td>08/11/2010</td>
            </tr>
            <tr>
                <td>PAI</td>
                <td>7.50</td>
                <td>3.00</td>
                <td>22.50</td>
                <td>20.00</td>
                <td>Rental Time</td>
                <td>Driver/Cust.</td>
                <td>5/11/2010</td>
                <td>08/11/2010</td>
            </tr>
            <tr>
                <td>BCDW</td>
                <td>15.00</td>
                <td>3.00</td>
                <td>45.00</td>
                <td>20.00</td>
                <td>Rental Time</td>
                <td>Driver/Cust.</td>
                <td>5/11/2010</td>
                <td>08/11/2010</td>
            </tr>
            <tr>
                <td>BTP</td>
                <td>7.15</td>
                <td>3.00</td>
                <td>21.45</td>
                <td>20.00</td>
                <td>Rental Time</td>
                <td>Driver/Cust.</td>
                <td>5/11/2010</td>
                <td>08/11/2010</td>
            </tr>
        </tbody>
    </table>
</div>    

<div class="row">
</div>

<div class="separator">
</div>

这是我的弹出代码（这在没有数据表的页面中效果很好）：

$().ready(function() {
    $("#agent-bill-id").click(function() { // id which is to be clicked
        $.get(
                "ModalPopup/AgentBillSearch", // ModalPopup Controller/ RandomPopupView Action
                function(htmlResult) {
                    $("#agent-bill-search").remove(); //The Div in the view page.
                    $("#container").append(htmlResult); // The place to show the dialog (pop up)
                    $("#agent-bill-search").dialog({ width: 650, modal: true, maxWidth: 650, maxHeight: 600, title: 'BMS Car Rental Application' }); // The Div in the view page.
                }
            );
        return false; //To keep the default behavior of the anchor tag from occuring.
    });

    // Removed table javascript
});

注意：

我认为问题在于javascript。我引用了正确的脚本并制作了正确的操作方法。我得到的这个对话框只在有数据表的页面中加载问题。

由于