将onclick事件应用于页面加载时不存在的元素

Question

我已经设置了一个列表看起来像一个选择框,我想在用户单击列表中的元素时触发一个函数但是元素是通过加载的AJAX,因此当页面加载时我不能绑定onclick它的事件onDomReady.

如果我将它作为一个正常的选择列表,我可以只将onChange事件标记到该<select>字段,但我显然不能这样做.

我的HTML:

<div id="main_category_field" class="fields">
    <div class="cat_list">
        <ul>
            <li class=""><a rel="1866" href="#1866">Sports Cards &gt;</a></li>
            <li class=""><a rel="1867" href="#1867">Gaming Cards &gt;</a></li>
            <li class=""><a rel="1868" href="#1868">Non-Sport Cards &gt;</a></li>
            <li class=""><a rel="1869" href="#1869">Supplies &amp; Storage &gt;</a></li>
            <li class=""><a rel="1940" href="#1940">Video Games </a></li>
        </ul>
    </div>
    <div class="contentClear"></div>
</div>

每当用户单击任何这些选项时,如何运行函数？如果您还可以建议如何rel在单击选项时传递背面的相应值,那也会很棒.

使用jQuery这样的选项将是首选.

编辑:意思是说主要元素main_category_field是静态元素.里面的元素通过AJAX加载.

Answer 1

如果使用on() try 动态添加元素,则需要将元素委托给静态父元素

  $(document).on('click','li a',function(e){
    e.preventDefault();
    var rel = this.rel;
     //or using attr()
    var rel=$(this).attr('rel'); 
     alert(rel);  
  });

但是将它委托给最近的静态父级(在插入时出现)比文档本身更好..所以如果你在main_category_fielddiv 中添加列表..那么你可以使用

    $('#main_category_field').on('click','li a',function(e){     
         //same stuff

Answer 2

关键词是event delegation.如果要将事件处理程序分配给您知道其"未来"选择器的动态添加元素,则应.on()在这些动态元素的(已存在的)父元素上使用该方法.

第二个参数.on()是动态添加元素的选择器

$(document).on('click', '.cat_list li a', function(e) {
   alert(this.rel);   // show the "rel" attribute of the clicked a element
   e.preventDefault();  // to prevent the default action of anchor elements
});