JQ获取click事件之前和之后的值

最新推荐文章于 2024-05-13 13:25:23 发布

T_P_F

最新推荐文章于 2024-05-13 13:25:23 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：踩过的坑前端文章标签： javascript jquery 绑定事件

本文链接：https://blog.csdn.net/T_P_F/article/details/122865488

踩过的坑同时被 2 个专栏收录

48 篇文章

订阅专栏

前端

1 篇文章

订阅专栏

本文通过示例介绍了如何使用JQuery正确地获取click事件触发前后input元素的值，强调了在使用on绑定事件时，选择器应限制为id或class，以避免因多次绑定导致的事件重复触发问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var before = "";
$("#testDiv").on('focus','input[name='aa']',function(){
    before = $("input[name='aa']:checked").val();
}).on('click',,'input[name='aa']',function(e){
    var after = $(e.target).val();
    //判断before和after之前和之后的值
})

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ENTRUST</title>
</head>
<body>
<div class="testDiv">
    <div id="" class="test">
        <label><input type="radio" name="aa" value='1'>测试a</label>
        <label><input type="radio" name="aa" value='2'>测试b</label>
        <label><input type="radio" name="aa" value='3'>测试c</label>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    var before = "";
    $(".testDiv").on('focus',"input[name='aa']",function(){
        before = $("input[name='aa']:checked").val();
    }).on('click',"input[name='aa']",function(e){
        var after = $(e.target).val();
        //判断before和after之前和之后的值
        console.log('点击之前的值：'+before+'点击之后的值：'+after);
    })
    
</script>
</body>
</html>

注意：
on绑定事件，选择器只能使用id或class选择器，如果使用标签选择器会出现绑定的事件多次触发。
原因是，这样写的是给div下的name是aa的input绑定事件，但是input可能嵌套了多个div，所以会在input上多次绑定事件。点击一下多次触发。
所以需要获取确定的元素，所以使用id或者class
var before = “”;
$(“div”).on(‘focus’,“input[name=‘aa’]”,function(){
before = $(“input[name=‘aa’]:checked”).val();
}).on(‘click’,“input[name=‘aa’]”,function(e){
var after = $(e.target).val();
//判断before和after之前和之后的值
console.log(‘点击之前的值：’+before+‘点击之后的值：’+after);
})

在这里插入图片描述