Databases
StackOverflow2013
Postsdbo
POjQuery event not triggered
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery event not triggered
    text
    copied!<p>I've this piece of markup. This piece has been loaded through ajax and appended inside a div.</p> <p>Content of file <code>user-bar.php</code>:</p> <pre><code>&lt;div id="u-bar"&gt; &lt;ul id="u-nav" class="nav"&gt; &lt;li id="notifications-list" class="dropdown" data-time="" &gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt; &lt;i class="icon-comment"&gt;&lt;/i&gt; Notifications &lt;b class="caret"&gt;&lt;/b&gt; &lt;/a&gt; &lt;ul class="dropdown-menu" &gt; &lt;li&gt;&lt;a href="#"&gt;Notification One&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Notification two&lt;/a&gt;&lt;/li&gt; &lt;li class="divider"&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Show All Notifications&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt; &lt;i class="icon-user"&gt;&lt;/i&gt; Profile &lt;b class="caret"&gt;&lt;/b&gt; &lt;/a&gt; &lt;ul class="dropdown-menu"&gt; &lt;li&gt;&lt;a href="#"&gt;View Profile&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Settings&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="php/logout.php"&gt;Logout&lt;/a&gt;&lt;/li&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>I've <code>scripts.js</code> file as below which is included in the <code>index.php</code> file as <code>&lt;script type="text/javascript" src="js/scripts.js"&gt;&lt;/script&gt;</code></p> <pre><code>$(function(){ loadUserBar(); $('#notifications-list').live('click', function(){ console.log('Test'); $('#notifications-list .icon-comment').removeClass('new'); }); }); function loadUserBar(){ $('#user-area').load('php/user-bar.php', function(){ initBootstrapElems(); //Initializing All popover elements }); } </code></pre> <p><code>index.php</code> file has the <code>div#user-area</code> where the ajax returned markup is inserted.</p> <p>After the whole page has been loaded, when I click on the list-item <code>#notifications-list</code>, nothing happens. But when I typed in <code>$('#notifications-list').click()</code> directly in the console, the log does appears and the <code>removeClass</code> does occur.</p> <p>What could be wrong here?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload