Question

我有一个网页，其中包含可能存在或不存在的按钮和链接。我有jQuery运行并将click事件分配给这些按钮和链接。

在尝试附加click或其他任何事件之前检查是否存在按钮或链接是不是不？有什么影响？

如果我应该检查按钮和链接是否存在，最佳做法是什么技术？如此检查长度 - $('myButton').length != 0或其他方式？

Answer 1

除非你不需要做一些不同的事情，否则绝对不需要提前检查。

假设您可能有或没有id值"myButton"的按钮。如果你这样做：

$("#myButton").click(function() { /* ..... */ });

...并且按钮不存在，没有连接处理程序。这实际上是一种无操作。

另一种方法是：

var btn = $("#myButton");
if (btn.length !== 0) {
    btn.click(function() { /* ... */ });
}

...它不会为你节省任何东西（你仍然需要查看DOM），但确实涉及更多代码。

这是关于jQuery的“集合论”方法的一个好处：如果集合为空，集合上的操作不会失败，它们就不会做任何事情。

Answer 2

对于不包含任何元素的jQuery对象调用jQuery函数没有任何影响，因为jQuery已经隐式地为您处理了这个问题。它本质上依次遍历每个匹配的元素，并且试图迭代一个初始化但空的集合，这只会导致不采取任何行动。

Answer 3

$('myButton')是对DOM的搜索。定义不明确的搜索条件和超重的DOM可能导致昂贵的搜索操作。

有些开发人员忘记了这一点，并针对相同的搜索查询执行多项操作，例如

if ($('myButton').length !== 0) {
    $('myButton').click(...);    
}

如果$('mybutton')返回一个或多个结果，则上面的搜索会运行两次。

你当然可以“优化”这个

var myButtonSearchResult = $('myButton');
if (myButtonSearchResult.length !== 0) {
    myButtonSearchResult.click(...);
}

但是，通过注意jquery将很乐意接受空集上的操作，可以进一步改进这一点：

$('myButton').click(...);

jquery足够聪明，可以运行搜索，请注意它返回并设置为空，然后忽略.click()。

简而言之，不需要先检查按钮是否存在。

Answer 4

无需检查按钮是否存在。如果“#myButton”不存在，$（'＃myButton'）。click（...）将不会附加任何内容，这也不错。