Нажмите событие, которое не выполнено в списке выпадающего списка начальной загрузки, нажмите

Question

У меня есть несколько выпадающих списков (более 10), и мой метод клика никогда не выполняется ... Можно ли определить тот же метод щелчка для всех выпадающих элементов, как я сделал ниже?

JS

<link rel="stylesheet" href="Scripts/bootstrap/css/bootstrap.min.css" /> 
<script src="Scripts/jquery-2.1.0.min.js"></script> 
<script src="Scripts/bootstrap/js/bootstrap.min.js"></script> 
<script type="text/javascript"> 

    $(document).ready(function() { 

     $(".dropdown-menu li a").click(function() { 

      console.log("inside"); //this never executes... 

      var type = $(this).data("type"); 
      var nick = $(this).data("nickname"); 

      if (type == "1") { 
       $('#chat_text').val('!tip ' + nick + ' ').focus(); 
      } 
      else if (type == "2") { 

      } 
      else if (type == "3") { 
       var val = $('#chat_text').val(); 
       $('#chat_text').val(val + nick).focus(); 
      } 
     }); 
    }); 
</script> 

HTML

<li class="dropdown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Test1</a> 
    <ul class="dropdown-menu" role="menu"> 
    <li><a href="#" data-type="1" data-nickname="Test1">Tip</a></li> 
    <li><a href="#" data-type="2" data-nickname="Test1">Show</a></li> 
    <li><a href="#" data-type="3" data-nickname="Test1">Paste</a></li> 
    </ul> 
    <span>Some text</span> 
</li> 

<li class="dropdown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Test2</a> 
    <ul class="dropdown-menu" role="menu"> 
    <li><a href="#" data-type="1" data-nickname="Test2">Tip</a></li> 
    <li><a href="#" data-type="2" data-nickname="Test2">Show</a></li> 
    <li><a href="#" data-type="3" data-nickname="Test2">Paste</a></li> 
    </ul> 
    <span>Some text</span> 
</li> 

Больше этого выпадающие в реальном коде ....

* EDIT: Я забыл упомянуть, что я добавляю эти выпадающие динамически после страница сгенерирована (AJAX calls ....)

Answer 1

Если добавить их динамически, попробуйте следующее:

$("body").on('click', '.dropdown-menu li a', function() { 

Вместо

$(".dropdown-menu li a").click(function() { 

С этим изменением обработчик щелчка будет там для каждого якорного элемента в пределах класса выпадающего-меню, нет когда он будет создан.

Answer 2

Как только контент был загружен с помощью AJAX-вызовов, вам необходимо реализовать Event Delegation. Хорошая статья here.