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

这是)};的问题。应该是});。

＆＃13;

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

＆＃13;

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

＆＃13;

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 Call结束时，add_endRequest Manager会触发处理程序。

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

3 个答案:

旧答案：