关于非现有元素的jquery事件

时间:2011-09-21 15:05:28

标签: jquery events

在某些情况下(基于PHP)将事件绑定到页面上不存在的ID是不是很糟糕?它会导致代码错误和缓慢,还是jQuery会自动忽略它们?

我是否应该在每个可能不存在的元素上添加如下内容?

if ( $('#element') ){
    $('#element').click(function(event) {}
}

我的页面设置是在某些条件下没有加载某个编辑框以防止功能被尝试..我用条件php包括它设置它因为它是基于数据库中我不想要的情况传递到前端。

现在,页面上的所有j都在一个包含许多函数的文件中。

2 个答案:

答案 0 :(得分:16)

当jQuery选择器没有返回任何元素时,没有绑定任何事件。因此,如果不写if语句,你就不会受到伤害。

这意味着内部jQuery将事件处理程序绑定到所有匹配的元素。如果没有,则不会将任何处理程序绑定到任何元素。这意味着:您不必在代码中检查元素是否存在。

未来参考

每当你做的时候

if ( $('#element') ){
    $('#element').click(function(event) { /* blah blah */ });
}

你应该保存选择器结果

var result = $('#element');

// check number of elements (zero equals false, anything else equals true)
if (result.length) {
    result.click(function(event) {
        // blah blah
    });
}

result.lengthresult.size() 相同

将事件处理程序绑定到非现有元素

如果您的界面将生成新元素,并且您希望它们在添加到DOM时附加eevent处理程序,那么您应该使用delegate()函数。还有live()功能,但只要有可能就使用第一个,因为它是一个更好的选择。网上有很多资源,为什么会这样。例如This Stackoverflow answer

  

注意 :从jQuery 1.7开始,.delegate()已被.on()方法取代。但是,对于早期版本,它仍然是使用事件委派的最有效方法。

     

请参阅jQuery documentation

答案 1 :(得分:3)

$("selector")将始终返回一个jquery对象,该对象具有与您的选择器匹配的元素列表。

if($("#nonexistantelement")) { /* this always happens*/ }

无论你内心是什么,总是如此,因为Objects是真实的。如果你真的想这样做,那么你想说的话是:

if($("#nonexistantelement").length > 0) { /* this only happens if you have something */ }

这将告诉您是否实际匹配了您的元素。但是在空的jquery集上调用.click(function)没有任何害处。因为所有jquery都会迭代选择器匹配的元素并应用该侦听器。如果集合中没有元素,则它不会被应用,并且基本上是noop。

现在,如果您想将回调绑定到不存在尚未的元素,那么请查看.live()delegate()