jQuery.on()根据文档使用时无法正常工作?

时间:2013-02-22 23:47:28

标签: javascript jquery

我已经阅读了live()(现在已经从jQuery中删除),delegate()和on()的所有文档。经过8个小时的撞击我自己的头部问题,我无法弄清楚如何解决它。 我想在一堆链接中添加一个匿名函数,这些链接是通过AJAJ引入的数据创建的。我尝试过以下代码:

$("#more_items_outer").on(
            'click',
            '.show_more',
            function(a){
                var target = a.parentElement;
                if (target.is(":visible")){
                    target.hide("slow");
                } else {
                    target.show();
                }
            }
        );

这个代码在页面加载后在我的开发浏览器上的JS控制台中运行时工作正常。但是,如果在创建实际链接之前运行,则此代码对这些链接不执行任何操作。据我了解(以及多个来源,包括官方jQuery文档,描述它),on()函数,因为我在上面的代码中使用它应该使事情,以便创建类“show_more”的任何元素作为任何具有id“more_items_outer”的元素的后代,将在单击时执行匿名函数。即使新元素的创建在执行此代码之后也是如此,这应该是真的。这不是在我的开发系统上发生的,而且我很清楚为什么会这样。我正在运行jQuery 1.9.1,如果有帮助的话。

1 个答案:

答案 0 :(得分:3)

首先,请查看下面的第5项。它看起来像你在点击事件处理函数中有几个javascript错误。

一般来说,.on()的动态形式是这样的:

$(static selector that exists).on('click', 'dynamic selector', function() {});

由于您没有向我们展示您的HTML或ajax,我只能列举可能出错的事情:

  1. 静态选择器表示的对象必须在执行.on()调用时存在。
  2. 静态选择器对象必须是动态对象的父对象。
  3. 动态选择器必须匹配原始调用时存在或稍后添加的子对象。
  4. 您可能会在.on()来电之前发生javascript错误,以致它永远不会出现问题。
  5. 您的处理程序函数中似乎有一个javascript错误。您引用a.parentElement的代码似乎有误。在该上下文中,a是一个jQuery事件对象,我不相信它具有parentElement属性。而且,即使parentElement是一个元素,那么执行target.is(":visible")的下一行也不会起作用,因为target不是jQuery对象。因此,您至少必须修复处理程序函数中的代码。如果这是唯一的错误,那么您应该能够在javascript错误控制台或调试控制台中看到这些错误。