javascript - 无法在动态对象 jquery 上绑定(bind)事件

Question

我必须绑定(bind)一个事件，该事件会在单击列表中的任何选项时触发。该列表是动态的自动建议列表。当建议器上的某些内容键入时，它就会出现。

我必须在单击列表元素时绑定(bind)一个事件以进行 GA 跟踪。

这是列表出现之前的 html。

<div class="head-auto-search-col header-autosearch-result-div" id="header-autosearch-result-div">

                </div>

一旦列表出现，它就变成了。

<div class="head-auto-search-col header-autosearch-result-div" id="header-autosearch-result-div">
<ul class="head-auto-search">
<li href="http://bangalore.quikr.com/astrology-astrology-numerology/astrology/x236" class="first-li"><span class="head-auto-sugg-span1"><b>astrology</b></span><span class="head-auto-sugg-span2">in Astrology - Numerology</span></li>

<li href="http://bangalore.quikr.com/astrologer-astrology-numerology/astrologer/x236"><span class="head-auto-sugg-span1"><b>astrologer</b></span><span class="head-auto-sugg-span2">in Astrology - Numerology</span></li>

<!--More li -->
</ul>
</div>

我为此编写的js代码是

$(document).on("click",".head-auto-search li",function(){
  var category='Header_Responsive';
  var action='gaPageAction';
  var label='click_autosearch_list';
  getEventTrackGA({'category':category,'action':action,'label':label}); //function call for ga tracking. 
});

这个功能不起作用，不知道哪里出了问题？

Answer 1

试试这个:

$('.head-auto-search-col').on("click",".head-auto-search li",function(){
  var category='Header_Responsive';
  var action='gaPageAction';
  var label='click_autosearch_list';
  getEventTrackGA({'category':category,'action':action,'label':label}); //function call for ga tracking. 
});

这会将监听器绑定(bind)到页面上的静态元素，这应该允许监听器监听来自动态创建的列表元素的事件。