为什么我不能使用jQuery.click（）定位li元素？

Question

我有这个HTML：

<ul id="ul_places_list"> 
  <li data-placesCode="6">  
    <a class="places_dtl" href="#">  
      <div>  
        <img src="http://dev.mysite.it/images/9_1418893365.jpg">  
      </div>  
      <label>Coming Out</label>  
    </a>   
  </li>
  <li data-placesCode="8">  
    <a class="places_dtl" href="#">  
      <div>  
        <img src="http://dev.mysite.it/images/9_1418893594.jpg">  
      </div>  
      <label>Friends</label>  
    </a>   
  </li>
</ul> 

和这个JavaScript

$(document).delegate('a','click',function(){//used to switch page
    console.log('delegate executed');
    var a = $(this);
    if(a.attr('href') != '#'){
        event.preventDefault();
        toPage(a.attr('href'));
    }
});
$(document).ready(function(){
    $('#ul_places_list li').click(function(){
        var code = $(this).attr('data-placesCode');
        console.log('code is: ' +code);
    });
});

问题是，当我单击列表元素时，仅会激发该元素上的委派单击，而不会触发“ li”元素上的事件。 在Ajax调用之后添加“ li”元素。
怎么了 我想念什么？

Answer 1

这个)}; 是问题所在。 应该是}); 。

  $(document).delegate('a','click',function(){//used to switch page console.log('delegate executed'); var a = $(this); if(a.attr('href') != '#'){ event.preventDefault(); toPage(a.attr('href')); } }); $(document).ready(function(){ $('#ul_places_list li').click(function(){ var code = $(this).attr('data-placesCode'); console.log('code is: ' +code); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <ul id="ul_places_list"> <li data-placesCode="6"> <a class="places_dtl" href="#"> <div> <img src="http://dev.mysite.it/images/9_1418893365.jpg"> </div> <label>Coming Out</label> </a> </li> <li data-placesCode="8"> <a class="places_dtl" href="#"> <div> <img src="http://dev.mysite.it/images/9_1418893594.jpg"> </div> <label>Friends</label> </a> </li> </ul> 

Answer 2

下面的答案实际上只是代码的另一种实现。

真正的答案是

这个)}; 是问题所在。 应该是}); 。

从另一个答案： https : //stackoverflow.com/a/27571915/561731

但是，您确实应该在新代码中使用.on ：-)

---

旧答案：

尝试使用.on

因此，您可以执行以下操作：

$(document).on('click', 'a', function () {
    //event for anchor tag
});

$(function () {
    $('#ul_places_list').on('click', 'li', function () {
        //stuff for li click event
   });
});

Answer 3

如果您在AJAX调用中添加“ li”元素，则应在元素加载后添加click事件。 在ajax调用结束时添加以下内容：

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(addEventToControls)

function addEventToControls()
{
 $('#ul_places_list li').click(function(){
            var code = $(this).attr('data-placesCode');
            console.log('code is: ' +code);
        });
}

当Ajax调用结束时，add_endRequest管理器将触发处理程序。