title: Dynamically adding a click handler in jQuery
body: <p>I have an MVC application in which the top menu is build dynamically like so:</p>
  
  <pre><code> $.each(data, function (index, dataMenu) {
                  if (i == 0) {
                      stringBuilder.push('&lt;li class="home"&gt;&lt;a href="#"&gt;' + dataMenu.MenuName + '&lt;/a&gt;&lt;/li&gt;');
                      i++;
                  }
                  else {
  
  
                      stringBuilder.push('&lt;li class="dropdown"&gt;&lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;' + dataMenu.MenuName + '&lt;/a&gt;');
                      stringBuilder.push('&lt;ul class="dropdown-menu"&gt;');
                      $.each(dataMenu.GetallMenus, function (index, submnu) {
                          stringBuilder.push('&lt;li class=""&gt;&lt;a data-ajax="true" data-ajax-mode="replace" data-ajax-update="#content-area" href="' + submnu.MenuItemUrl + '"&gt;' + submnu.MenuName + '&lt;/a&gt;&lt;/li&gt;');
                      });
                      stringBuilder.push('&lt;/ul&gt;');
                      stringBuilder.push('&lt;/li&gt;');
                  }
              });
              stringBuilder.push('&lt;/ul&gt;');
              $("#menu").append(stringBuilder.join(''));
  </code></pre>
  
  <p>There's a loader gif in a div tag on _Layout.cshtml and on document.ready it's hidden initially.</p>
  
  <p>What I am trying to do is to show that div on every menu click.</p>
  
  <p>How do I go about doing it?</p>
  
  <p>Regards.</p>