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

Question

我将列表样式设置为看起来像一个选择框，我想在用户单击列表中的元素时触发一个函数，但是该元素是通过 AJAX 加载的因此当页面加载并且我无法绑定(bind) 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() 动态添加元素，则需要将元素委托(delegate)给静态父元素 试试这个

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

然而，将它委托(delegate)给它最近的静态父级(在插入时存在)比文档本身更好。所以如果你在 main_category_field div 中添加列表......那么你可以使用

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