Question

`

＆＃13;

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');
                    }

                });
                });

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

`我从父窗口加载了一个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事件。

jQuery对话框上的Onclick事件无效

3 个答案: