Fatal编程技术网
  • javascript/
  • Javascript 无法为$（文档）上的jqueryui/jqm小部件事件设置on（）侦听器吗？

Javascript 无法为$（文档）上的jqueryui/jqm小部件事件设置on（）侦听器吗？

javascript jquery jquery-ui jquery-mobile

Javascript 无法为$（文档）上的jqueryui/jqm小部件事件设置on（）侦听器吗？,javascript,jquery,jquery-ui,jquery-mobile,jquery-ui-widget-factory,Javascript,Jquery,Jquery Ui,Jquery Mobile,Jquery Ui Widget Factory,我正在尝试在$（文档）上设置一个全局事件绑定器，它是我所有核心应用程序函数的根 我正在使用一些jQueryUI小部件（来自jQueryMobile），希望我的全局处理程序中也能包含小部件事件 所以我试着这么做： $(document).on("click change filterablebeforefilter", ".action_elements", function (e) { // foo }); 然而，这是行不通的。我可以在我的小部件input事件上设置click和cha

我正在尝试在
$（文档）
上设置一个全局事件绑定器，它是我所有核心应用程序函数的根

我正在使用一些jQueryUI小部件（来自jQueryMobile），希望我的全局处理程序中也能包含小部件事件

所以我试着这么做：

 $(document).on("click change filterablebeforefilter", ".action_elements", function (e) {
   // foo
 });
然而，这是行不通的。我可以在我的小部件
input
事件上设置click和change侦听器，但是
filterablebeforefilter
不能这样设置。至少我不能让它工作

仅指定直接绑定：

 $( ".selector" ).on( "filterablebeforefilter", function( e, data ) {
  // foo
 });
问题：
但是我想知道是否没有办法将事件附加到
文档

谢谢

$（文档）上的自定义事件处理程序执行以下操作：


奥文坦德勒
$（文档）.ready（函数（）{
$（文档）。在（'单击filterEvent'，'上。操作元素'，函数（）{
警惕（“你点击了我！”）；
});
$（'#OrderFilter'）。更改（函数（）{
$（'#CustomerFilter'）。触发器（'filterEvent'）；
});
$（'#CustomerFilter'）。在（'filterEvent'，函数（）{
警报（“CustomerFilter filterEvent”）；
});
});
一些文本

点击我

按订单Id
按订单总计

只是一些文本
您可以使用$（document）.on（'event'，'selector'）为自定义事件委派处理程序

编辑

因此，这排除了自定义事件传播到文档级别并由委托的事件处理程序处理的可疑情况

查看和您的问题，您是否在问：如果他们在输入框中单击，或者输入框发生了更改，或者小部件在开始对某些数据应用过滤之前正确，那么是否执行function（）{…}

如文档所述，如果目的是在完成过滤之前覆盖过滤过程以获取一些要过滤的数据；首先从数据库开始（我想到谷歌搜索…），它应用于手头的小部件难道没有意义吗？如果应用程序中有多个小部件，是否希望所有小部件都具有相同的数据DB调用（例如，在同一页面上有4个google搜索输入框？）

每个小部件的beforefilter事件必须是唯一的，这是有道理的（想想3个文本框，一个用于google，一个用于yahoo，一个用于bing）。如果是这样，他们是如何做到这一点的我还不知道（但我会尝试，因为我有兴趣知道…）

此外，在过滤器启动之前还有250毫秒的延迟，因此它会等待用户是否完成键入。。。由于变更事件也被委派，处理程序将为其执行，并在250毫秒后触发beforefilter事件时完成或正在进行中。。。那么处理程序执行两次？不管是不是，这有意义吗

我猜，他们有它，所以每个小部件只能有一个beforefilter事件处理程序，设计如上所述。还要注意，在文档示例中，它们使用的是.on（）的直接绑定表示法（未指定选择器）。一切都指向元素的绑定，而不是委托。

您总是会遇到棘手的问题；）我想我也有一个答案。。。我假设jQueryUI小部件事件与“浏览器事件”不同，因此它们停留在其“领域”内，不会在任何地方传播或冒泡，因此在文档上设置侦听器将不起作用。仍然需要确定一个好问题，你的解释听起来很合理。您应该为此添加一个答案，这样它就不会显示为未回答。此外，如果您确实希望将侦听器挂起到如此高的级别（这不仅仅是一个简单的示例），那么您可能应该更好地指定筛选元素-仅使用像“.action_elements”这样的单个类，根据您的文档结构，可能会导致性能不佳-最好也指定元素类型，例如'div.action_elements.@John NotANumber-我最终使用了
$（document）。在（“单击change keyup input”，“.action”，function（e）{…}
上，它是高级的，非常“通用”，但它是我在应用程序中设置的唯一绑定（用于链接、输入和选择）。尚未测试此绑定是否比单个绑定的性能更高，但它确实更易于维护：-）
$（文档）。在（…）
上，只会将事件处理程序附加到
文档
$（）。delegate
只是
$（）的别名。在
上，它的参数重新排序。“处理程序越靠近“.action_”元素，对DOM jQuery的遍历就越少，这意味着处理更少，性能更好。”-这也不是真的。jQuery在任何情况下都必须遍历到顶部，如果只是为了验证那里没有什么可做的。在任何情况下，影响都可以忽略不计。向上遍历很快，因为一个元素只有这么多父元素。可以直接绑定..on（）（如果忽略选择器或为null），或者以委托方式绑定（如果指定了选择器）。我更喜欢使用.delegate（），因为目的很清楚。无论哪种方式，将（使用.on（）或.delegate（））委托给触发元素的DOM中最接近的父级，都会减少处理程序的冒泡步骤，并附加更少的处理程序。请参阅“将…委派给最近的父级…附加较少的处理程序”中的“直接和委派事件”一节，绝对不是。我确信
$（document）.on
总是将事件处理程序精确地附加到一个元素，而不是多个元素。另一方面，如果父选择器选择多个元素，则同一处理程序将附加到多个元素。诚然，除非你有数百个元素，否则最好尽可能贴紧。@JanDvorak:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>OnEventHandler</title>
    <script src="Scripts/jquery-2.1.0.min.js"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $(document).on('click filterEvent', '.action_element', function () {
                alert('You Clicked Me!');
            });
            $('#OrderFilter').change(function () {
                $('#CustomerFilter').trigger('filterEvent');
            });
            $('#CustomerFilter').on('filterEvent', function () {
                alert('CustomerFilter filterEvent');
            });
        });
    </script>
</head>
<body>
    <p>Some text.</p>
    <p class="action_element">Click me!</p>
    <select id="OrderFilter">
        <option>By Order Id</option>
        <option>By Order Total</option>
    </select>
    <p id="CustomerFilter" class="action_element">Just some Text...</p>
</body>
</html>