jquery:click event for li under two div tags
<p>I need to bind menus dynamically based on role, thus I concatenated string with <code>ul</code> &amp; <code>li</code> tags. </p>

<p>I need to show the selected text in the label, thus I added a click event but it does not fire.</p>

<p><strong>HTML code</strong></p>

<pre><code>&lt;div id='jqxWidget' style='height: 30px; display: none;background-color:#e8e8e8'&gt;
    &lt;div id='jqxMenu' style='margin-left: 20px;'&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>Click event</strong></p>

<pre><code>$('.jqxMenu li').click(function () {
    alert($(this).html()); 
});
</code></pre>

<p><strong>String binded in jqxmenu</strong></p>

<pre><code>  &lt;ul id='mainid'&gt;
     &lt;li&gt;&lt;a href=#&gt;Operations&lt;/a&gt;
       &lt;ul style='width: 150px;'&gt;
         &lt;li&gt;&lt;a href=default.aspx?src=1010&gt;Booking&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href=default.aspx?src=1009&gt;Manifest &lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href=default.aspx?src=1002&gt;RunSheet&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href=default.aspx?src=1004&gt;Delivery Updation&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href=default.aspx?src=1007&gt;Recovery&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href=default.aspx?src=100&gt;Local Manifest Branch&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href=default.aspx?src=5501&gt;Extras&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href=default.aspx?src=2300&gt;Bulk Import&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
     &lt;/li&gt;
    &lt;/ul&gt;
</code></pre>

<p>For example, if <code>Manifest</code> is selected, I need to show that text in a label on click event. However, it does not fire...</p>

<p>I tried the below code for click event:</p>

<pre><code>$('#jqxMenu li').click(function (e) {
    e.preventDefault();  // Check if the li has a parent .. To prevent double firing of li     
    if ($(this).parents('li').length) {
        e.stopPropagation();
    }
    alert($(this).html());
});
</code></pre>

<p>The click event is not fired, but, when I tested it in fiddle it's working fine.</p>

<p>My entire jQuery code is as follows:</p>

<pre><code>$(document).ready(function () {
    var theme = getTheme();
    $('#jqxMenu li').click(function (e) {
    e.preventDefault();   // Check if the li has a parent .. To prevent double firing of li     
    if ($(this).parents('li').length) {
        e.stopPropagation();
    }
    alert($(this).html());
});

$("#jqxMenu").css('visibility', 'visible');

$("#jqxMenu").jqxMenu({ width: '600', height: '30px', theme: theme });

$("#open").bind('change', function (event) {
    $("#jqxMenu").jqxMenu({ autoOpen: true });
});        

$('#jqxMenu').bind('itemclick', function () { 
    $('#selid').val($(event.args).text()); });        
});
</code></pre>

<p>Any suggestions why the click event is not fired in website?</p>

<p><strong>Thanks in advance</strong></p>
