jQuery针对多个元素的相同点击事件
有没有办法为页面上的不同元素执行相同的代码?
$('.class1').click(function() {some_function();
});$('.class2').click(function() {some_function();
});
而是做一些像:
$('.class1').$('.class2').click(function() {some_function();
});
谢谢
#1楼
$('.class1, .class2').on('click', some_function);
要么:
$('.class1').add('.class2').on('click', some_function);
这也适用于现有对象:
const $class1 = $('.class1');
const $class2 = $('.class2');
$class1.add($class2).on('click', some_function);
#2楼
只需将$('.myclass1, .myclass2, .myclass3')
用于多个选择器。 此外,您不需要lambda函数将现有函数绑定到click事件。
#3楼
我通常使用on
,而不是click
。 它允许我向特定函数添加更多事件侦听器。
$(document).on("click touchend", ".class1, .class2, .class3", function () {//do stuff
});
希望能帮助到你!
#4楼
另一种选择,假设您的元素存储为变量(如果您在函数体中多次访问它们,通常是个好主意):
function disableMinHeight() {var $html = $("html");var $body = $("body");var $slideout = $("#slideout");$html.add($body).add($slideout).css("min-height", 0);
};
利用jQuery链接并允许您使用引用。
#5楼
我有一个包含许多输入字段的对象的链接,这需要由同一事件处理。 所以我只需使用find()来获取需要拥有事件的所有内部对象
var form = $('<form></form>');
// ... apending several input fieldsform.find('input').on('change', onInputChange);
如果你的对象是链接的一级,可以使用children()而不是find()方法。
#6楼
我们也可以编写如下代码,我在这里使用了模糊事件。
$("#proprice, #proqty").blur(function(){var price=$("#proprice").val();var qty=$("#proqty").val();if(price != '' || qty != ''){$("#totalprice").val(qty*price);}});
#7楼
除了上面的优秀示例和答案,您还可以使用他们的类对两个不同的元素进行“查找”。 例如:
<div class="parent">
<div class="child1">Hello</div>
<div class="child2">World</div>
</div><script>
var x = jQuery('.parent').find('.child1, .child2').text();
console.log(x);
</script>
这应输出“HelloWorld”。
#8楼
添加逗号分隔的类列表,如下所示:
jQuery(document).ready(function($) {$('.class, .id').click(function() { // Your code}});
#9楼
如果您有或想要将元素保存为变量(jQuery对象),您还可以循环它们:
var $class1 = $('.class1');
var $class2 = $('.class2');$([$class1,$class2]).each(function() {$(this).on('click', function(e) {some_function();});
});
#10楼
$('.class1, .class2').click(some_function);
确保你放置一个像$('。class1,space here.class2')的空格,否则它将无效。
jQuery针对多个元素的相同点击事件相关推荐
- JQuery 动态生成元素添加点击事件
页面代码 <html> ... <body> <div id="divBox"></div> <script> $(fu ...
- jQuery移除或禁用html元素的点击事件
移除或禁用html元素的点击事件可以通过css实现也可以通过js或jQuery实现. 一.CSS方法 .disabled { pointer-events: none; } 二.jQuery方法 方法 ...
- ajax点击事件无法触发,解决jQuery Ajax动态新增节点无法触发点击事件的问题_婳祎_前端开发者...
在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写οnclick="" ...
- jQuery动态添加按钮,绑定点击事件失效
jQuery动态添加按钮,绑定点击事件失效 因为需求需要给页面动态添加按钮并绑定点击事件进行操作, 但是发现绑定的点击事件失效. 原因分析: append中的节点是在整个文档加载完之后开始添加,因此页 ...
- html 点击子元素,html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡...
如果子元素和父元素都有点击事件,会出现点击事件冒泡的情况. 1.如何避免冒泡: html: 你好, 战无不胜 [注销] js: 方法1: UserLogout.οnclick=function (e) ...
- html 元素响应,jQuery动态添加html元素后,响应事件的问题记录
var li = " " + "" + // 缩略图 点击部分 index='" + i + "' "" + " ...
- css中为伪元素增加点击事件和hover
鼠标悬停在父元素上面时为伪类元素增加样式 <!-- html结构 --> <div class="father"></div><style ...
- html,js 中如何屏蔽div子元素点击事件会触发父元素的点击事件($event.cancelBubble=true;)
1. 第一种方法:html中屏蔽父元素的点击事件($event.cancelBubble=true;) <div (click)="select($event)"> & ...
- jQuery on()方法绑定动态元素的点击事件无效
之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...
最新文章
- C/C++中各种类型int、long、double、char表示范围(最大最小值)
- c语言火车票管理系统源代码2000行,C语言教务管理系统[2000行代码].doc
- 大学计算机——所有大学生都应学习的一门计算思维基础教育课程,_大学计算机_所有大学生都应学习的一门计算思维基础教育课程...
- 同比 数据模型 环比_历史数据模型解决方案-历史数据模型解决方案
- 数据结构之树和二叉树的应用:二叉排序树(BST)
- 【Elasticsearch】Elasticsearch 基于scoll技术滚动搜索大量数据
- 「leetcode」203.移除链表元素:听说用虚拟头节点会方便很多?
- C# 简单封装一个XML文件读取类
- Windows Phone开发(37):动画之ColorAnimation 转:http://blog.csdn.net/tcjiaan/article/details/7526026...
- Excel如何导出自定义架构xml
- 黄色量能通达信指标公式!没有未来函数,不加密的副图指标!
- 微型计算机控制技术赖pdf,微型计算机控制技术.pdf
- 离散分布的分布函数_条件分布与条件期望
- cbox央视影音(CNTV客户端)广告屏蔽方法
- 嵌入式开发Linux入门
- WordPress星级评分插件KK Star Ratings评分插件教程
- 【无人机三维路径规划】基于A算法解决三维路径规划问题含危险障碍地形含Matlab源码
- deepin下安装mysql_deepin系统安装mysql
- 使用virt-manager 创建虚拟机
- 720phi10p 和 720p有什么区别_很多人都在都使用视频采集卡,那视频采集卡有几种?有什么特点和区别?...