Onclick event on jQuery dialog box not working

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>

`I have a jQuery dialog box loaded from a parent window with list of data. I want to load a sublist when the user clicks on the list elements in the dialog.

The onclick event to load the sublist is defined in the parent file. When the dialog box is clicked no action is performed.

What am I missing? Is it because I am using multiple functions within same file or same document.ready function ?

open dialog -

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

function for onclick event -

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 content on dialog box -

<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

If the button is dynamically generated you have to use delegate. http://api.jquery.com/delegate/

Answer 2

Please try to change your code in following way.

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

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

you can try handling instead of load

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

Answer 3

I think most of the issues encountered here were because of IE9 in quirks mode. It won't support CSS hover(except anchor tags) and few jquery operations are not supported . Finally had to resort to javascript for achieving onclick event on dialog box.