无法绑定动态对象jquery上的事件

时间:2015-07-31 07:02:55

标签: javascript jquery html

我必须绑定一个事件,该事件在单击列表中的任何选项时触发。列表是自动建议列表,它是动态的。当某些类型出现在建议者身上时会出现。

我必须在点击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. 
});

这个功能不起作用。我不知道它有什么问题吗?

2 个答案:

答案 0 :(得分: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. 
});

这会将侦听器绑定到页面上的静态元素,这应该允许侦听器从动态创建的列表元素中听到事件。

答案 1 :(得分:0)

如果页面渲染后<div class="head-auto-search-col header-autosearch-result-div" id="header-autosearch-result-div">没有动态创建,那么下面的代码看起来很好:

$('#header-autosearch-result-div').on("click",".head-auto-search li",function(){ });