JQuery removeClass和移除class的事件绑定

最新推荐文章于 2021-06-05 02:32:42 发布

Waldenz

最新推荐文章于 2021-06-05 02:32:42 发布

阅读量8.7k

点赞数

分类专栏： JS/jQuery

本文链接：https://blog.csdn.net/enter89/article/details/8443111

版权

JS/jQuery 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

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

  function NumbersOnlyBind() {
        $(".NumbersOnly").bind({
            keypress: function(event) {
                var key = event.which;
                if (key < 48 || key > 122 || key > 57) {
                    return false;
                }
            }
        });
    }

然后添加两个textbox, 第一个用于输入类型, 初始为NUM, 意思为只能输入数字模式, 第二个用于测试这种模式. 当第一个输入框为NUM时,点击按钮Apply, 则第二个输入框就只能输入数字, 第一个输入框为其他字符串时, 第二个则可以输入任何字符.

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

页面源代码:

<html>
<head>

<script type="text/javascript" src="./jquery/jquery-1.7.2.js"></script>

<script type="text/javascript">
$(document).ready(function() {

    function NumbersOnlyBind() {
        $(".NumbersOnly").bind({
            keypress: function(event) {
                var key = event.which;
                if (key < 48 || key > 122 || key > 57) {
                    return false;
                }
            }
        });
    }

    $("#txtType").val("NUM");

    $("#btnApply").click(function(event) {

        var type = $("#txtType").val();

        if (type == "NUM") {
            $("#txtTest").addClass("NumbersOnly");
            NumbersOnlyBind();
            // alert("numberonly");
        }
        else {

           // $("#txtTest").removeClass("NumbersOnly");
             $("#txtTest").unbind();
             //$(".NumbersOnly").unbind();//移除所有的事件
            // alert("Remove numberonly");
        }

        $("#txtTest").val("");
        $("#txtTest").attr("readonly", false);
        $("#txtTest").focus();
        event.preventDefault();
    });
});

</script>
</head>
<body>
	<input name="txtType" type="text" maxlength="10" id="txtType" >
	<input name="txtTest" type="text" maxlength="10" id="txtTest" >
	<input type="button"  name="btnApply" value="Apply" id="btnApply">

</body>
</html>

Waldenz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JQuery removeClass和移除class的事件绑定

今天遇到一个问题, 定义一个样式,且给样式绑定事件,让其只能输入数字. js函数如下: function NumbersOnlyBind() { $(".NumbersOnly").bind({ keypress: function(event) { var key = event.which;
复制链接

扫一扫

专栏目录