我如何修改这段代码，以便文档每次都搜索它？

Question

如何修改以下 3 行代码，使其使用 $(document) ？

    $('.navbar li ul').slideToggle(300);

和

    $('.navbar > li:first-child > span').text("Category");

和

    if (!container.is(e.target)

文档使用示例：

    document.getElementById("input1").focus();

和

    $(document).on('click', '.navbar ul span', function(event) {    
    });

和

    $(document).mouseup(function (e) { 
    });

等...

Answer 1

看来您对 jQuery 选择器有点困惑。

 $('.navbar li ul').slideToggle(300);

已经搜索了整个文档。如果省略 jQuery 对象的第二个参数，则它隐含为 document。所以，上面的选择器等同于：

 $('.navbar li ul', document).slideToggle(300);

将 document 作为第二个参数省略是一个捷径。如果它不存在，默认情况下由 jQuery 库假定。

像这样：

document.getElementById("input1")

是一个普通的 Javascript 语句 - 没有 jQuery，没有 CSS 选择器。这是另一种通过 id 查找元素的方法，大致等同于 jQuery 语句：

$("#input1")

或普通的 Javascript:

document.querySelector("#input1");

从您的评论来看，您可能想问的是如何使用委托事件处理，以便您的查询可以处理动态创建的元素。如果是这种情况，您应该编辑您的问题以实际这么说。将来，请描述您试图解决的问题，而不是您尝试的解决方案。那么，我们可以更全面地帮助您。

如果是这样，那么你可以使用这个，然后委托事件处理只适用于事件处理程序，它不适用于一次性命令，如：

$('.navbar li ul').slideToggle(300);

当你运行它时，它会在任何存在的元素上起作用，并且没有 document 等价物或任何方法可以使它对动态元素更好或更差。它适用于您调用它时存在的任何元素，因为它不是未来事件的事件处理程序安装。这是您在这个特定时刻执行的操作，因此它只能对当前存在的元素起作用。

您可能会发现这些其他答案对了解有关这些问题的更多信息很有用：

Should all jquery events be bound to $(document)?

jQuery .live() vs .on() method for adding a click event after loading dynamic html

JQuery Event Handlers - What's the "Best" method

Does jQuery.on() work for elements that are added after the event handler is created?

How do I modify this code so that the document searches for it every time?