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

关键词是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
});

Answer 2

如果使用on()动态添加元素，则需要将元素委托给静态父元素试试这个

  $(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_field div中添加列表，那么你可以使用

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

Answer 3

使用.on监听动态创建的dom元素，如下所示

$(document).on('click','div.cat_list ul li a',function(){
     var rel=$(this).attr('rel');//to get value of rel attribute
     alert(rel);   
     //other operations
});

Answer 4

要将事件处理程序绑定到页面上尚不存在的元素，请使用on。

$(document).on("click", "#main_category_field", function(e){
   e.preventDefault();
   var rel = e.target.rel;
});

JS小提琴： http://jsfiddle.net/82bAb/

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

4 个答案: