jQuery对新添加的控件添加响应事件

最新推荐文章于 2024-07-14 03:40:57 发布
最新推荐文章于 2024-07-14 03:40:57 发布
阅读量210 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://yq.aliyun.com/articles/341765
版权

1. 通过id和类控制

复制代码 
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
        $("#button1").click(function(){
            var val = "<div class='mi'>nihao</div>";
            jQuery("#h").append(val);
            $(".mi").click(function(){
                $(this).hide();
            });
        });
});

$(document).ready(function(){
        $("#mi").click(function(){
            $(this).hide();
        });
});
</script>
</head>

<body>
<div id="h">
<button id="button1">hihi</button>
</body>
</html>
复制代码

效果

初始化

点击一次

点击三次

点击一次“你好”

2. 通过数组中的值作为id

2.1 错误思路

复制代码 
<html>
<head>
<script src="jquery.js"></script>
<script>
var val = ["No1", "No2", "No3", "No4"]

$(document).ready(function(){
        $("#button1").click(function(){
            for (var i = 0; i < val.length; ++i)
            {
                var tmp = "<div id=" + val[i] + ">nihao</div>";
                jQuery("#h").append(tmp);
            }
        });
});

for (var i = 0; i < val.length; ++i)
{
    $(document).ready(function(){
        $("#" + val[i]).click(function(){
            {
                $(this).hide();
            }
        });
    });
}

</script>
</head>

<body>
<div id="h">
<button id="button1">hihi</button>
</body>
</html>
复制代码

问题在于，一开始并没有id为val列表中的控件，此时初始化事件不行的。

2.2 改正1——集中处理

复制代码 
<html>
<head>
<script src="jquery.js"></script>
<script>
var val = ["No1", "No2", "No3", "No4"]

$(document).ready(function(){
        $("#button1").click(function(){
            for (var i = 0; i < val.length; ++i)
            {
                var tmp = "<div id=" + val[i] + ">nihao</div>";
                jQuery("#h").append(tmp);
            }

            for (var i = 0; i < val.length; ++i)
            {
                $(document).ready(function(){
                    $("#" + val[i]).click(function(){
                        {
                            $(this).hide();
                        }
                    });
                });
            }
        });
});


</script>
</head>

<body>
<div id="h">
<button id="button1">hihi</button>
</body>
</html>
复制代码

注：点击一次“hihi”，原因是原来id的控件只是隐藏了，再添加就会有重复的id了。

2.3 改正2——单独处理

复制代码 
<html>
<head>
<script src="jquery.js"></script>
<script>
var val = ["No1", "No2", "No3", "No4"]

$(document).ready(function(){
        $("#button1").click(function(){
            for (var i = 0; i < val.length; ++i)
            {
                var tmp = "<div id=" + val[i] + ">nihao</div>";
                jQuery("#h").append(tmp);
                $("#" + val[i]).click(function(){
                    $(this).hide();
                });
            }
        });
});


</script>
</head>

<body>
<div id="h">
<button id="button1">hihi</button>
</body>
</html>
复制代码

 

深入了解jQuery， 有疑问

复制代码 
<html>
<head>
<script src="jquery.js"></script>
<script>
var val = ["No1", "No2", "No3", "No4"]

$(document).ready(function(){
        $("#button1").click(function(){
            for (var i = 0; i < val.length; ++i)
            {
                var tmp = "<div class='divclass' id=" + val[i] + ">nihao:" + val[i] + "</div>";
                jQuery("#h").append(tmp);
                /*
                $("#" + val[i]).click(function(){
                    alert(":" + i);
                    $(this).hide();
                });
                */
            }
            $(".divclass").on("click", function(){
                    $(".divclass").hide();
            })
        });
});


</script>
</head>

<body>
<div id="h">
<button id="button1">hihi</button>
</body>
</html>
复制代码

 











本文转自jihite博客园博客，原文链接：http://www.cnblogs.com/kaituorensheng/p/4566087.html，如需转载请自行联系原作者


weixin_33849215
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery 的加载事件
04-12
jquery的页面初始加载方法与各自的区别
jquery 动态添加控件
03-21
本篇文章将深入探讨如何使用jQuery动态添加控件，包括元素的创建、插入和绑定事件，以及在实际项目中的应用。 首先，我们来了解jQuery如何创建新的HTML元素。在JavaScript中，创建元素通常是通过`document....
jquery添加点击事件的几种方式
最新发布
weixin_27130513的博客
07-14 486
jQuery添加点击事件的几种方式 在前端开发中，经常需要给页面元素添加点击事件，以实现交互功能。jQuery是一个广泛应用的JavaScript库，提供了许多简洁方便的方法来处理DOM操作，其中包括添加点击事件。本文将介绍几种jQuery添加点击事件的方式，并附上相应的代码示例。 1. 通过click()方法添加点击事件...
jQuery事件
weixin_64037609的博客
09-20 1258
jQuery事件
jquery 添加事件_将事件添加到jQuery中的添加事件
Web 开发&软件开发
08-06 782
将事件添加到jQuery中的添加事件 本周早些时候，我发布了一个可用性提示，内容涉及如何使用CSS和MooTools的自定义事件功能在元素获得“点击”事件时自动添加“指针”光标 。 我收到了许多有关jQuery版本的请求，我想我已经弄清楚了如何复制该功能。 观看演示 jQuery JavaScript失败 /* create custom event */ jQuery.eve...
使用jquery当页面打开时，将一个事件绑定到控件(同时执行两个事件)，并修改加载样式类中的样式
CF西西的专栏
05-08 4264
$(document).ready(function () { document.getElementById('comment').className = ".ui-tabs .ui-tabs-hide"; document.getElementById('comment').style.cssText = "display:block"; document.getElementById('question').classNam
jquery jquery控件 时间控件 时分秒控件
05-12
例如，Timepicker Addon是一个流行的jQuery UI扩展，它添加了对时间选择的支持，允许用户选择小时、分钟和秒。 在描述中提到的"在cal.js最后"可能是指一个特定的脚本文件，该文件包含了实现时间控件的代码。开发者...
jQuery的控件及事件(输入控件及回车事件)使用示例
10-27
在本文中，我们将深入探讨jQuery库中关于输入控件及回车事件的使用。jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画效果和Ajax交互等任务。在这个示例中，我们关注的是如何利用jQuery来监听并...
jQuery 相关控件的事件操作分解
10-29
对于动态添加的元素，`live` 方法（在jQuery 1.7之后已被 `on` 方法取代）可以实现事件的委托，确保即使在页面加载后新添加的元素也能响应事件。然而，由于 `live` 已经废弃，推荐使用 `on` 方法： ```javascript $...
jQuery操作基本控件方法实例分析
11-23
在JavaScript的世界里，jQuery是一个非常流行的库，它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本文将深入探讨jQuery如何操作基本的HTML控件，通过实例来帮助理解这些方法的用法。 首先，jQuery提供...
jq追加html点击事件,jQuery - 给动态创建的元素添加事件绑定（给js新插入元素添加click事件）...
weixin_39652154的博客
06-02 408
1，问题描述(1)这里以点击事件为例，通过 click() 方法给页面上所有的“删除”按钮添加个点击响应。要注意的是，“删除”按钮除了页面上原有的之外，还可以通过代码动态插入。$(function() {//新增按钮点击响应$('#addBtn').click(function(){//添加一个新条目$('ul').append('动态新增条目' +' 删除');});//删除按钮点击响应$('....
引入的组件添加事件
weixin_44986077的博客
12-09 324
vue中给引入的组件添加事件， 例如A组件引入searchion A组件代码 <searchicon></searchicon> import searchicon from '../../components/searchicon/index' components: { searchicon }, 这样便引入了自己写的自定义的组件 但是想要在引入的组件...
javascript中为某个对象（控件）绑定事件的几种方法
前端岚枫
08-23 1994
今天学习了javascirpt的一些基础知识，有关事件绑定的一些方法：  1.   这是最简单也是最直接的一种方法，不过一般程序中很少用。 2.     var v=document.getElementById("button");  v.onclick=clickHandler;//后面不要带括号； function clickHandler(event){
JQuery 为动态生成input的控件添加事件
m0_37693130的博客
06-29 637
【代码】JQuery 为动态生成input的控件添加事件。
jQuery向动态添加的组件绑定事件
ljh243581579的博客
10-17 2464
jquery中绑定事件一般使用bind，或者click，但是这只能是对已经加载好的元素定义事件，那些后来添加插入的元素则需要另行绑定。在1.7版本以前使用live。但是在1.8版本以后推荐使用on。**$('body').on('click','.adminUser',function () {** var receive_id = $(this).attr("data-id");
jquery动态添加组件监听事件
小小黑
01-04 4413
在使用bootstrap table等这些异步增删查的表格时，经常会遇到使用on、click等方法监听不到触发的点击事件等，这是需要使用delegate方法，用法如下： $( "#table" ).delegate( ".rulesSelect", "click", function() { console.log("abee"); }); # table 为 一个div容器 .
jquery:为动态加载的元素添加点击事件
热门推荐
golden_wheat
07-25 1万+
jquery:为动态加载的元素添加点击事件 最近在做项目的时候遇到了这样一个问题，给用ajax动态加载出来的内容添加点击事件，但是怎么都触发不了，经过查询试验总结出正确的写法 在jquery1.7之前的版本中用的是live()方法，但是live()方法在1.7中已经不建议使用，1.9中删除了这个方法 live()方法适用于匹配选择器的当前及未来的元素（例如有脚本创建的新元素） 重点是自jq
实现jQuery日期选择控件：Ext风格版
JavaScript代码的核心部分涉及到了DOM操作，动态生成日期列表，以及事件绑定，例如点击事件，用于响应用户的选择并更新日期值。此外，控件可能还包括其他功能，如初始化日期、日期范围限制、以及与输入框的联动等。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值