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

unable to bind event on dynamic object jquery

本文关键字：绑定 事件 jquery 对象 动态      更新时间：2023-09-26

我必须绑定一个事件，触发点击列表内的任何选项。该列表是动态的自动建议列表。

我必须绑定一个事件的点击列表的元素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. 
});

这个函数不起作用。我不知道有什么问题?

试试这个:

$('.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. 
});

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

如果<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(){ });
相关文章：