jQuery對話框上的Onclick事件不起作用

Question

`

 jQuery(document).ready(function() { $('#wrapper').dialog({ autoOpen: false, title: 'Basic Dialog' }); $('#listButton').click(function() { $('#wrapper').dialog('open'); }); var $navChild = $(".navChild"); $('.navParent').on("click", "li", function () { if(($(this).children(".navChild").css('display'))=='block'){ $(".navChild", this).hide(); $(this).removeClass('open'); }else{ $navChild.hide(); $("li").removeClass('open'); $(".navChild", this).show(); $(this).addClass('open'); } }); }); 

 .navParent { width:200px; } .navParent a { padding:15px; display:block; color:black; } .navParent u { padding:15px; display:block; color:black; } .navParent ul { display:none; list-style:none; margin:0; padding:0; } .navParent li { margin:0; padding:0; } .navParent li.open { margin:0; padding:0; } .navChild li { list-style:none; margin:0; padding:0; } .navChild { display: none; } 

 <button id="listButton">Open List</button> <div id="wrapper"> <TABLE> <DIV>List </DIV> <TR> <TH>Items</TH> <TH>Date</TH> </TR> <TR> <TD> <ul class="navParent"> <li> <u>Parent Item</u> <ul class="navChild"> <li><a href="#sites">Child Item 1</a> </li> <li><a href="#sites">Child Item 2</a> </li> <li><a href="#sites">Child Item 3</a> </li> <li><a href="#sites">Child Item 4</a> </li> </ul> </li> </ul> </TD> <TD>07/28/2012</TD> </TR> </TABLE> </div> 

`我有一個從數據窗口的父窗口加載的jQuery對話框。 我想在用戶單擊對話框中的列表元素時加載一個子列表。

在父文件中定義了用於加載子列表的onclick事件。 單擊對話框時，不執行任何操作。

我想念什么？ 是因為我在同一文件或同一document.ready函數中使用多個功能嗎？

打開對話框-

$('#Button').click(function () {
    $('#dialogBox').load('', function (responseTxt, statusTxt, xhr) {
        $('#dialogBox').dialog('open');
    });
});

onclick事件的功能-

var $navChild = $('.navChild');
$('.navParent').on('click', 'li', function () {
    if (($(this).children('.navChild').css('display')) == 'block') {
        $('.navChild', this).hide();
        $(this).removeClass('open');
    } else {
        $navChild.hide();
        $('li').removeClass('open');
        $('.navChild', this).show();
        $(this).addClass('open');
    }
});

對話框上的HTML內容-

<table>
    <div>Lists</div>
    <tr>
        <th>Items</th>
        <th>Date</th>
    </tr>
    <tr>
        <td>
            <ul class="navParent">
                <li>
                    <u>Parent Item</u>

                    <ul class="navChild">
                        <li>
                            <a href="#sites">Child Item 1</a>
                        </li>
                        <li>
                            <a href="#sites">Child Item 2</a>
                        </li>
                        <li>
                            <a href="#sites">Child Item 3</a>
                        </li>
                        <li>
                            <a href="#sites">Child Item 4</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </td>
        <td>07/28/2012</td>
    </tr>    
</table>

Answer 1

請嘗試通過以下方式更改您的代碼。

$(function() {
    $('#dialogBox').dialog({
        autoOpen:false
    });

    $("#Button").click(function(e) {
        e.preventDefault();
        $('#dialogBox').dialog('open');
    });
});

您可以嘗試處理而不是加載

$(document).on("dialogopen", ".ui-dialog", function(event, ui) {
    ...
});

Answer 2

如果按鈕是動態生成的，則必須使用委托。 http://api.jquery.com/delegate/

Answer 3

我認為這里遇到的大多數問題是由於IE9處於怪癖模式。 它不支持CSS懸停（錨標記除外），並且不支持少數jquery操作。 最后不得不求助於javascript以實現對話框上的onclick事件。