jquery添加click事件,jq动态添加click事件多种方式分享

news/2024/7/19 15:50:29 标签: js, javascript, html
htmledit_views">

 目录:

       添加方式

       实例演示

 

 

添加方式


$("#ImId1").click(function(){});
$("#ImId2").bind("click",function(){})
$("#ImId3").on("click",function(){})
$("body").delegate("#xxx","click",function(){})

 

实例演示:

导入jq

html"><script type="text/html" title=javascript>javascript" src="/html" title=js>js/jquery-1.8.2.min.html" title=js>js"></script>

Html

<main>

<div id="ImId1">1</div>

<div id="ImId2">2</div>

<div id="ImId3">3</div>

<main>

html" title=js>js

html"><script language="html" title=javascript>javascript" type="text/html" title=javascript>javascript">
   $(document).ready(function() {
     //实例1
     $("#ImId1").click(function(){
         alert($("#ImId1").text())
       });

//实例2
 $("#ImId2").click(function(){
  alert($("#ImId2").text())
  });

//实例3
 $("#ImId3").click(function(){
  alert($("#ImId3").text())
  });

   });
</script>

其中$("#ImId2").bind("click",function(){})支持html" title=js>js中通过append添加html,再bind

html">$("#ImId3").append('<div class="msgCloseBtn" style="position: absolute;top: 2px;right: 5px ;cursor: pointer;">x</div>')
$(".msgCloseBtn").bind("click",function(){
    $(".el-message--success").remove();
})

结束。


http://www.niftyadmin.cn/n/1464346.html

相关文章

内网穿透,解决vue项目中的“Invalid Host header”

在webpack.dev.config.js&#xff0c;加入devServer: { disableHostCheck: true }&#xff0c;具体如下图 结果就能通过内网穿透了&#xff0c;访问结果

配置spring boot jpa控制台打印sql日志

在application.properties中加入以下两行 spring.jpa.properties.hibernate.format_sqltrue spring.jpa.properties.hibernate.show_sqltrue运行起来看到这样的结果

看完这篇能解决一些关于element ui table控件的使用常见问题,如table中自定义a标签,列中加入复选框或者序号列,时间控件的格式问题等

在script中加入 var app new Vue({el: #app,data: function () {return { itemList:[],}}, created: function() {//初始化你的table数据this.itemList你的list数据 }, methods: { submitForm: function (formName) {// }, resetForm: function (formName) {this.$refs[form…

java 模拟表单post提交

Java /*** 模拟提交表单* param url* param sb*/ public static String postByFormData(String url,StringBuffer sb){String responseMessage "";StringBuffer response new StringBuffer();HttpURLConnection httpConnection null;OutputStreamWriter out nul…

记录一次linux 安装jdk1.8

准备linux 版本的jdk ,自行到百度找到并下载&#xff0c;这里只介绍预备好压缩包的安装方式 传到服务器你管理软件的文件夹, 我的是/usr/local/soft 创建一个用来安装java的文件夹 mkdir /usr/local/java 从刚准备好的tar包的文件夹中解压到/usr/local/java中 tar zxvf /u…

linux 安装nginx,nginx error: the HTTP rewrite module requires the PCRE library;the HTTP gzip module re

问题&#xff1a;nginx error: the HTTP rewrite module requires the PCRE library. 执行&#xff1a;yum -y install pcre-devel 问题&#xff1a;the HTTP gzip module requires the zlib library. 执行&#xff1a;yum install -y zlib-devel

Execution repackage of goal org.springframework.boot:spring-boot-maven-plugin:XXX repackag age faile

问题 [ERROR] Failed to execute goal org.springframework.boot:spring-boot-maven-plugin:2.3.0.RELEASE:repackage (repackage) on project mb-bg-fw-web: Execution repackage of goal org.springframework.boot:spring-boot-maven-plugin:2.3.0.RELEASE:repackage failed:…

Caused by: java.lang.NoClassDefFoundError: javax/servlet/GenericFilter

这个类没被发现的问题 1、如果用了maven管理jar&#xff0c;到仓库查看对应的路劲下面是否正确打包成功 2、如果打包成功了对应的jar到对应仓库项目还是报这样错误&#xff0c;解压jar包查看目录结构是否正确 3、如何检查jar包的目录结构是否正确&#xff1f;如熟悉jar包的一…