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

Question

I have this 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> 

and this 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);
    });
});

The problem is that when I click on list element only the delegated click on the element fires and not the event on the "li" element. The "li" elements are added after an Ajax call.
What's going? What am I missing?

Answer 1

This )}; was the problem. Should be this }); .

  $(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

The below answer actually is just a different implementation of your code.

The real answer is

This )}; was the problem. Should be this }); .

From the other answer: https://stackoverflow.com/a/27571915/561731

But you really should be using .on in new code :-)

---

Old answer:

Try using .on

So you can do:

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

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

Answer 3

if you add the "li" elements in a AJAX call you should add the click event after the elements load. Add this when ajax call end:

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);
        });
}

The add_endRequest Manager fire the handler when a Ajax Call end.