关于非现有元素的jquery事件
在某些情况下(基于PHP)将事件绑定到页面上不存在的ID是不是很糟糕? 它会导致代码错误和缓慢,还是jQuery会自动忽略它们?
我是否应该在每个可能不存在的元素上添加如下内容?
if ( $('#element') ){ $('#element').click(function(event) {} }
我的页面设置是在某些条件下没有加载某个编辑框以防止函数被尝试..我用条件php包括它设置它因为它基于数据库中我不想真正传递给的情况前端。
现在,页面上的所有js都在一个包含许多function的文件中。
当jQuery选择器不返回任何元素时,不会绑定任何事件。 因此, if
不写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.length
与 result.size()
相同 。
将事件处理程序绑定到非现有元素
如果您的接口将生成新元素,并且您希望它们在添加到DOM时附加了eevent处理程序,那么您应该使用delegate()
函数。 还有live()
函数,但只要有可能就使用第一个函数,因为它是一个更好的选择。 网上有很多资源,为什么会这样。 例如, 这个Stackoverflow的答案 。
注意 :从jQuery 1.7开始,.delegate()已被.on()方法取代。 但是,对于早期版本,它仍然是使用事件委派的最有效方法。
请参阅jQuery文档 。
$("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()