社区首页 >问答首页 >jQuery使用.on()代替.live()

jQuery使用.on()代替.live()
EN

Stack Overflow用户
提问于 2014-02-01 10:44:59
回答 4查看 92关注 0票数 1

对于.on()方法,我有点困惑。让我试着解释一下:

我需要使用.on()格式为:$(document).on('click', 'selector', function (e) {});,而不是$('selector').on('click', function(e) {});,以便它也适用于现有元素和动态加载的元素。

我在这里创建了一个关于我的问题的简化示例:

代码语言:javascript
代码运行次数:0
复制
$(document).ready(function () {
    var obj = $('.testing');

    // Doesn't work
    $(document).on('click', obj, function (e) {
        e.preventDefault();
        alert($(this).text());
    });

    // Works, but won't work for new elements
    obj.on('click', function (e) {
        e.preventDefault();
        alert($(this).text());
    });
});

当我已经在一个变量中设置了选择器,并且jQuery实例已经包装在它周围时,它是第二个示例的正确格式,而不是第一个示例的格式,因为它已经被包装为一个jQuery实例。从'.selector'$('.selector')很容易,但是从$('.selector')'.selector'有路吗?

我的问题是,有什么方法可以解开jQuery实例,这样我就可以解析选择器而不是已经通过jQuery包装的选择器?

我在这里创建了一个JSFiddle:http://jsfiddle.net/MzwK8/

任何指点或帮助都将不胜感激。

编辑对不起,在我的例子中,我应该说我已经对它做了很多简化,但是选择器已经被解析为jQuery实例,比如$('.selector').plugin()。我应该说我没有能力改变var obj = $('.testing');

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2014-02-01 10:56:50

我认为获得选择器字符串是解决整个问题的错误方法,以下是原因:

我知道您希望$('.foo').plugin()同时使用现有的和未来的.foo元素,对吗?

但是,如果没有现有的.foo元素,会发生什么?插件函数甚至不会被执行,因此事件委托也不会被设置。这意味着,只有在已经存在插件的情况下,插件才能用于未来的.foo元素。从用户的角度来看,这是一个相当令人困惑的行为。

我认为,在您的用例中,创建一个静态插件更有意义,它只接受选择器字符串:

代码语言:javascript
代码运行次数:0
复制
$.plugin = function(selector) { ... };

$.plugin('div.bar');

许多回答提到了obj.selector,但是文献资料将此属性标记为不推荐使用和删除。他们的建议是:

需要在插件中使用选择器字符串的插件可能需要将其作为方法的参数。例如,可以将"foo“插件编写为 $.fn.foo =函数(选择器,选项){ /*插件代码在这里*/ }; 使用插件的人会写 $( "div.bar“).foo( "div.bar",{dog:"bark"} ); 将"div.bar"选择器重复作为.foo()的第一个参数。“

这就是您在插件中应该做的:要求选择器作为插件方法的参数。

票数 2
EN

Stack Overflow用户

发布于 2014-02-01 10:48:47

第二个参数应该是选择器,而不是jQuery对象:

代码语言:javascript
代码运行次数:0
复制
$(document).on('click', '.testing', function (e) {
    e.preventDefault();
    alert($(this).text());
});

如果可能的话,应该将事件绑定到与要添加的元素最近的现有元素上。这样,它就不必为页面中发生的每一次点击测试选择器。

票数 3
EN

Stack Overflow用户

发布于 2014-02-01 10:49:40

如果您想撤回原来的选择器,可以这样做:

代码语言:javascript
代码运行次数:0
复制
var obj = $('.testing');
console.log( obj.selector); // will log .testing
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/21502026

复制
相关文章
[译] 更可靠的 React 组件:组合及可重用性
原文摘自:https://dmitripavlutin.com/7-architectural-attributes-of-a-reliable-react-component/
江米小枣
2020/06/15
2.9K2
怎样开发可重用组件并发布到NPM [每日前端夜话0x24]
摘要:本文着眼于使用具有内置功能和样式的组件来扩充HTML。 我们还将学习如何通过 NPM 使这些自定义元素在项目中得到重用。
疯狂的技术宅
2019/03/27
1.1K0
怎样开发可重用组件并发布到NPM [每日前端夜话0x24]
如何使用SASS编写可重用的CSS
Sass 是一个CSS预处理程序,至今使用广泛,它之所以流行,是因为它修复了几个CSS缺陷:
前端小智@大迁世界
2022/06/15
7.7K0
如何使用SASS编写可重用的CSS
Logstash: 如何创建可维护和可重用的 Logstash 管道
Logstash 是一种开源数据处理管道,它从一个或多个输入中提取事件,对其进行转换,然后将每个事件发送至一个或多个输出。 一些 Logstash 实现可能具有多行代码,并且可能处理来自多个输入源的事件。 为了使此类实现更具可维护性,我将展示如何通过从模块化组件创建管道来提高代码的可重用性。
腾讯云大数据
2020/07/28
1.3K0
Logstash: 如何创建可维护和可重用的 Logstash 管道
在Vue中创建可重用的 Transition
Vue.js中的transition确实很棒。 毫无疑问,它们可以非常轻松地让应用程序栩栩如生,但是通常必须在每个项目中从头开始编写它们,甚至还需要引入animate.css之类的CSS库来使它们功能更强大。
前端小智@大迁世界
2020/06/04
9.8K0
在Vue中创建可重用的 Transition
开发容器:可重用的开发环境
作者 | Avdi Grimm 译者 | 明知山 策划 | 丁晓昀 拿着 Chromebook 在洗车房做开发 那天,我把车开到了洗车场。这是一个高级洗车场,你把车交给工作人员,然后等着他们把车里里外外清洗干净。 我要做的就是打发时间了。我还有一些代码要写,但当时我只有一台装在包里的小 Chromebook 和 WiFi 连接。 于是,我在 GitHub Codespaces 中打开了这个项目,然后在上次停下的地方继续,在云端运行我的开发环境。 不只是编辑器,而是整个为我的项目定制的虚拟机。
深度学习与Python
2023/04/01
1.2K0
开发容器:可重用的开发环境
代码质量--可重用代码
可重用的代码可以减少重复劳动。一个软件中,会有很多类似的业务场景。将这些场景抽象成可重用的代码。开发新功能时,重用代码可减少重复劳动。
FunTester
2023/08/04
1690
代码质量--可重用代码
可重用性的6个级别
这是有关级别的基本概述。我即将举行的课程“ 可重用组件 ”探讨了每个组件以及如何充分利用它们。
公众号---人生代码
2020/08/11
1.1K0
Vue3 Composition API中的提取和重用逻辑
Vue3 Composition API可以在大型项目中更好地组织代码。然儿,随着使用几种不同的选项属性切换到单一的 setup 方法,许多开发人员面临的问题是… …。
张张
2020/04/26
1.8K0
Vue3 Composition API中的提取和重用逻辑
ES中的api调用测试
SearchRequest可用于与搜索文档、聚合、建议有关的任何操作,还提供请求突出显示结果文档的方法。 
一个风轻云淡
2023/10/15
2240
调用谷歌翻译接口_api如何调用
在平时使用谷歌翻译的过程中,经常会遇到需要批量翻译大量文本的情景,这种时候需要调用谷歌翻译的API
全栈程序员站长
2022/11/03
4.7K0
如何实现可伸缩的 etcd API?
使用etcd grpc-proxy start的命令开启 etcd 的 gRPC proxy 模式,包含上表中的静态成员:
aoho求索
2021/06/16
1.4K0
代码质量第 2 层 - 可重用的代码
可重用的代码可以减少重复劳动。一个软件中,会有很多类似的业务场景。将这些场景抽象成可重用的代码。开发新功能时,重用代码可减少重复劳动。
前端GoGoGo
2021/12/14
9330
代码质量第 2 层 - 可重用的代码
可重用的代码可以减少重复劳动。一个软件中,会有很多类似的业务场景。将这些场景抽象成可重用的代码。开发新功能时,重用代码可减少重复劳动。
社区小番茄
2022/01/17
3.7K7
代码质量第 2 层 - 可重用的代码
96-可重用的TCP服务器
在95-socket基础:TCP服务器流程中,TCP服务器只能一个客户端连接,客户端也只能发送一条消息。本例允许客户端发送多条消息,输入end结束。客户端退出后,服务器程序不再退出,可以为下一个客户端提供服务:
凯茜的老爸
2018/09/11
1.1K0
ArkTS-@Styles定义组件重用样式
@Styles可以定义在组件内或全局,在全局定义时需在方法名前面添加function关键字,组件内定义时则不需要添加function关键字。
酒楼
2023/06/23
4670
在小程序中调用API在小程序中自定义弹窗组件
表明它是一个组件,我们称之为“子组件” 3. 注意:在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。(只使用class)
九旬
2020/10/23
3K0
Vuejs中父组件主动调用子组件的方法
我们都知道,vue是单向流,但是有时候我们需要在父组件中主动通知子组件一些信息,使其做出一些响应变化,那么如何在父组件中去主动调用子组件的方法呢?Vue当然给我们提供了方法,如下:
飞奔去旅行
2019/06/13
5K0
WordPress可重用自定义css样式
因为别人的友情链接模板样式都是针对性的对于他们的主题使用的,自己搜了一下插件商店并没有现成的插件,只有自己写一个友情连接的页面样式,但是当前整站使用的是一个整体主题,不知道能不能修改,就慢慢从主题编辑器里面找。
Diuut
2022/11/22
6630
WordPress可重用自定义css样式
代码质量第2层-可重用的代码!
导语 | 腾讯云加社区精品内容栏目《云荐大咖》,特邀行业佼者,聚焦前沿技术的落地与理论实践,持续为您解读云时代热点技术,探秘行业发展新机。 可重用的代码指:在相似业务场景下,用的是同一份代码。 可重用的代码可以减少重复劳动。一个软件中,会有很多类似的业务场景。将这些场景抽象成可重用的代码。开发新功能时,重用代码可减少重复劳动。 可重用的代码可以减少因需求变动,导致多次改动和漏改的情况。试想,要修改全站提交按钮的颜色,如果全站有100个包含提交按钮的页面,每个页面的按钮的样式都没复用,这改动量和漏改的风险都
腾讯云开发者
2022/01/20
8340

相似问题

无法使用angular translate在angular中翻译

11

在Angular拦截器中使用Angular服务

110

在Angular应用程序中使用angular元素

11

如何使用@ Angular /upgrade在Angular 1应用中使用angular 2组件

112

如何使用angular-qrcode Angular?

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档