為什么我不能使用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管理器將觸發處理程序。