JQuery removeClass和移除class的事件绑定

最新推荐文章于 2021-05-22 15:16:39 发布
最新推荐文章于 2021-05-22 15:16:39 发布
阅读量304 收藏
点赞数
文章标签： javascript ViewUI

今天遇到一个问题, 定义一个样式,且给样式绑定事件,让其只能输入数字. js函数如下:

[javascript] view plain copy
  1. functionNumbersOnlyBind(){
  2. $(".NumbersOnly").bind({
  3. keypress:function(event){
  4. varkey=event.which;
  5. if(key<48||key>122||key>57){
  6. returnfalse;
  7. }
  8. }
  9. });
  10. }
然后添加两个textbox, 第一个用于输入类型, 初始为NUM, 意思为只能输入数字模式, 第二个用于测试这种模式. 当第一个输入框为NUM时,点击按钮Apply, 则第二个输入框就只能输入数字, 第一个输入框为其他字符串时, 第二个则可以输入任何字符.

在实现时,思路是如果第一个输入框为NUM则给第二个输入框添加.NumbersOnly 样式, 否则移除该样式. 本以为移除样式后,第二个输入框中绑定的事件就可以移除, 但是事实证明是不可以移除的. 除非用unbind解除事件,因为虽然事件是通过.NumberOnly样式绑定的, 但是绑定后,这个事件就和这个输入框绑定上了,而和样式没关系了. 所以事件也不会随着样式的移除而移除..

页面源代码:

[html] view plain copy
  1. <html>
  2. <head>
  4. <scripttype="text/javascript"src="./jquery/jquery-1.7.2.js"></script>
  6. <scripttype="text/javascript">
  7. $(document).ready(function(){
  9. functionNumbersOnlyBind(){
  10. $(".NumbersOnly").bind({
  11. keypress:function(event){
  12. varkey=event.which;
  13. if(key<48||key>122||key>57){
  14. returnfalse;
  15. }
  16. }
  17. });
  18. }
  20. $("#txtType").val("NUM");
  22. $("#btnApply").click(function(event){
  24. vartype=$("#txtType").val();
  26. if(type=="NUM"){
  27. $("#txtTest").addClass("NumbersOnly");
  28. NumbersOnlyBind();
  29. //alert("numberonly");
  30. }
  31. else{
  33. //$("#txtTest").removeClass("NumbersOnly");
  34. $("#txtTest").unbind();
  35. //$(".NumbersOnly").unbind();//移除所有的事件
  36. //alert("Removenumberonly");
  37. }
  39. $("#txtTest").val("");
  40. $("#txtTest").attr("readonly",false);
  41. $("#txtTest").focus();
  42. event.preventDefault();
  43. });
  44. });
  46. </script>
  47. </head>
  48. <body>
  49. <inputname="txtType"type="text"maxlength="10"id="txtType">
  50. <inputname="txtTest"type="text"maxlength="10"id="txtTest">
  51. <inputtype="button"name="btnApply"value="Apply"id="btnApply">
  53. </body>
  54. </html>

今天遇到一个问题, 定义一个样式,且给样式绑定事件,让其只能输入数字. js函数如下:

[javascript] view plain copy
  1. functionNumbersOnlyBind(){
  2. $(".NumbersOnly").bind({
  3. keypress:function(event){
  4. varkey=event.which;
  5. if(key<48||key>122||key>57){
  6. returnfalse;
  7. }
  8. }
  9. });
  10. }
然后添加两个textbox, 第一个用于输入类型, 初始为NUM, 意思为只能输入数字模式, 第二个用于测试这种模式. 当第一个输入框为NUM时,点击按钮Apply, 则第二个输入框就只能输入数字, 第一个输入框为其他字符串时, 第二个则可以输入任何字符.

在实现时,思路是如果第一个输入框为NUM则给第二个输入框添加.NumbersOnly 样式, 否则移除该样式. 本以为移除样式后,第二个输入框中绑定的事件就可以移除, 但是事实证明是不可以移除的. 除非用unbind解除事件,因为虽然事件是通过.NumberOnly样式绑定的, 但是绑定后,这个事件就和这个输入框绑定上了,而和样式没关系了. 所以事件也不会随着样式的移除而移除..

页面源代码:

[html] view plain copy
  1. <html>
  2. <head>
  4. <scripttype="text/javascript"src="./jquery/jquery-1.7.2.js"></script>
  6. <scripttype="text/javascript">
  7. $(document).ready(function(){
  9. functionNumbersOnlyBind(){
  10. $(".NumbersOnly").bind({
  11. keypress:function(event){
  12. varkey=event.which;
  13. if(key<48||key>122||key>57){
  14. returnfalse;
  15. }
  16. }
  17. });
  18. }
  20. $("#txtType").val("NUM");
  22. $("#btnApply").click(function(event){
  24. vartype=$("#txtType").val();
  26. if(type=="NUM"){
  27. $("#txtTest").addClass("NumbersOnly");
  28. NumbersOnlyBind();
  29. //alert("numberonly");
  30. }
  31. else{
  33. //$("#txtTest").removeClass("NumbersOnly");
  34. $("#txtTest").unbind();
  35. //$(".NumbersOnly").unbind();//移除所有的事件
  36. //alert("Removenumberonly");
  37. }
  39. $("#txtTest").val("");
  40. $("#txtTest").attr("readonly",false);
  41. $("#txtTest").focus();
  42. event.preventDefault();
  43. });
  44. });
  46. </script>
  47. </head>
  48. <body>
  49. <inputname="txtType"type="text"maxlength="10"id="txtType">
  50. <inputname="txtTest"type="text"maxlength="10"id="txtTest">
  51. <inputtype="button"name="btnApply"value="Apply"id="btnApply">
  53. </body>
  54. </html>
iteye_4639
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
a标签跳转到指定div,jquery添加和移除class属性的实现方法
12-29
如果使用a标签跳转到指定的div区域，则只需要把a标签的href属性设置为“#divId”就好了，比如： 跳转到div 这里是被跳转的区域 ...以上就是小编为大家带来的a标签跳转到指定div,jquery添加和移除class属性的
jQuery使用removeClass方法删除元素指定Class的方法
10-24
主要介绍了jQuery使用removeClass方法删除元素指定Class的方法,可实现针对指定元素样式的批量删除功能,具有一定参考借鉴价值,需要的朋友可以参考下
.net bootstrap 下拉树状选择框_Bootstrap搭建图书管理系统
weixin_39770506的博客
11-21 264
https://www.zhihu.com/video/1246932038927360000每日测验""" 答案1.昨日内容回顾样式类操作""" addClass() classList.add() removeClass() hasClass() toggleClass() """css操作.css(属性名,属性值) jQuery链式操作 一行代码可以搞定很多事情 ...
removeClass删除类名称
weixin_44549398的博客
10-09 1538
removeClass方法从所有匹配的元素中删除全部或者指定的类。 HTML代码 页面显示的效果 上面的事例已经完成了，接下来，用jQuery的方法来删除用bootstrap.css插件给button标签上的某个类名。 jQuery代码 页面上显示的显示效果 removeClass方法可给一个或多个要删除的CSS类名，请用空格分开。 ...
Bootstrap实现动态添加删除输入框组-案例
TimEcho的博客
05-22 3024
<html> <head> <title>首页</title> <link type="text/css" rel="stylesheet" href="${ctx}/resource/user/css/style.css"> <!-- 引入 Bootstrap --> <link href="${ctx}/resource/js/bootstrap-3.3.6/css/bootstrap.min.
有关js改变class或remove掉class之后，原class绑定事件依旧存在的问题
芥焉丶丶的博客
01-10 5691
今天在进行前端js（jquery）编写的时候需要在多个部分做关联事件，于是想到了不同阶段给予不同的class来进行事件委托，但是一切做完之后，发现改变或删除元素class之后，依旧会保持原class的绑定事件。就已经对页面上该元素绑定相关监听事件了，而不是你点击的时候才去匹配的，所以即使你后来改了，监听事件还是依然能够生效。        这个时候你可以在你最初的事件上进行分支判
jQuery修改class属性和CSS样式整理
12-12
class属性修改 　类属性即class属性,规定类名. 　用类选择器规定样式的...　用jQuery进行类名修改既可以用attr()方法修改”class”属性,也可以用addClass(), removeClass(), toggleClass()等方法来完成. addClass()
jQuery hover事件简单实现同时绑定2个方法
01-19
本文实例讲述了jQuery hover事件简单实现同时绑定2个方法。分享给大家供大家参考，具体如下： 这里将hover事件同时挂2个方法： 1个是悬停的时候执行的，另外一个是离开的时候执行 代码如下： $(document).ready...
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
10-15
主要介绍了JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作,涉及jquery事件响应及页面元素属性动态操作相关使用技巧,需要的朋友可以参考下
jQuery removeClass 技巧_移除多个标签
热门推荐
喵爬架
02-27 1万+
jQuery removeClass 技巧_移除多个标签 $('.xx').attr('class','a b c'); $('.xx').removeClass('a'); 但是突然之间，需要我一次性清除掉两个class，那么这个时候我就懵了，怎么在不影响之前存在的class的情况下移除多个值呢？第一反应就是去w3cschool寻找答案，并获取了解决方法： //只需要通过空格来间隔...
jquery 用addClass之后 class有对应的事件，为什么要重新绑定一下事件呢
weixin_30432007的博客
08-31 179
假设有元素A，B，C，其中A和B都有class属性cls，如果在页面加载完成时，给具有class属性为cls的元素绑定某一事件，例如click，执行事件时调用alert。也就是说，页面加载完成后A和B都会被绑定事件，但C没有绑定。绑定事件相当于给A和B添加了一个click属性，显然此时C是没有该属性的。然后你给C添加了cls的class，但此时你做的事情仅仅是添加class，而没有绑...
jQuery unbind 删除绑定事件 / 移除标签方法
@风之谷
10-20 5405
jQuery unbind 删除绑定事件 unbind([type],[data]) 是 bind()的反向操作，从每一个匹配的元素中删除绑定的事件。如果没有参 数，则删除所有绑定的事件。你可以将你用bind()注册的自定义事件取消绑定。如果提供了事件类型作为参数，则只 删除该类型的绑定事件。如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。返回值 :
class鼠标移入移除事件
weixin_42097973的博客
05-14 869
/*优势特效*/ $(index_sectIon).on("mouseenter",function(){ $(this).find(index_sectiIontext).removeClass("transformrotateYS"); $(this).find(index_sectiIontext).addClass("transformrotate...
jQuery给class绑定事件
缄默大叔
05-22 6133
jQuery
jquery中有两种绑定事件及移除事件
luckydog
06-12 1万+
//jquery中有两种绑定事件及移除事件 /* 1、eventName $(&quot;button&quot;).click(function(){}) 部分事件不支持 2、on(ecentName,fn) $(&quot;button&quot;).on('click',function(){}) 所有事件都支持 都可以绑定多个事件，不会覆盖 */ ...
jquery 点击事件点击元素添加class，兄弟节点移除class
勋勋勋勋小勋勋的博客
09-10 6826
欢迎大家一起交流学习n(*≧▽≦*)n $("#circle").on('click', 'li',function(){ $(this).addClass("active").siblings().removeClass("active"); }); //索引位置$(this).index() eq() 方法将匹配元素集缩减值指定 index 上的...
addClass、removeClass、toggleClass三者的区别
一根破棍子的博客
09-01 4677
.addClass(“className”)方法是用来给指定元素增加类名，也就是说给指定的元素追加样式；  .removeClass(“className”)方法是用来给指定的元素移除类名，也就是说给指定元素移除样式；  .toggleClass(“className”)方法是用来给脂定的元素增加或移除类名（如果元素的类名存在就移除，如果不存在就增加），也就是说用来给指定的元素进行样式切换（如
jquery鼠标移入移除修改class
最新发布
06-12
在jQuery中，可以使用 `.hover()` 方法来实现鼠标移入移出事件，并使用 `.addClass()` 和 `.removeClass()` 方法来修改元素的class。示例代码如下： ``` $(document).ready(function() { // 鼠标移入时添加类名 $...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值