jq动态增加的button标签click回调失效的问题,即$("button.class").click(function)

对于新增加的页面元素,改变了页面结构,如果是使用老办法$("button.class").click(function)去监听新的button标签事件,会失效。

笔者的应用是文字的显示和隐藏之间的切换,给出我的代码:

解决办法:

$(document).on("click",".showPwd",function () {
//                alert("show now:" + );
                $(this).parent().html(
                        $(this).attr("key")+‘  ‘+
                        ‘<button class="btn btn-default btn-sm hidePwd" key="‘+$(this).attr("key")+‘"><span class="glyphicon glyphicon-eye-close"></span></button>‘);
});

$(document).on("click",".hidePwd",function () {
                //alert("show now");
                $(this).parent().html(‘<button class="btn btn-default btn-sm showPwd" key="‘+$(this).attr("key")+‘"><span class="glyphicon glyphicon-eye-open"></span></button>‘);
});
时间: 2024-10-05 17:22:07

jq动态增加的button标签click回调失效的问题,即$("button.class").click(function)的相关文章

2015.3.7小练习(动态增加元素及表格,以及浏览器兼容问题)

最近在对之前理解的HTML/CSS/javaScript查漏补缺,真是学会了Jquery马上就开始反感用javascript写很多jquery一下子就可以实现的选择和操作. 今天是做了一个根本无界面美观性可言的实验part,乱七八糟大乱炖,只为练习功能. 动态增加元素 function addBtn() { var textField = document.getElementById("main"); var input = document.createElement("

DOM动态增加控件

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>加法计算器</title> <script type="text/javascript"> function Addvalue() { var txt1 = document.getElementById("text1").val

WPF datagrid 动态增加列

DataGrid动态增加列 <Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="

jquery动态增加或删除tr和td【实际项目】

难点: (1)动态增加.删除tr和td (2)每天tr和td都有下标,且下标要动态变化, (3)tr和td为什么下标不能随便写,原因是此处需要把所有tr中的数据以list的形式发送到后台对象中,所有每天tr中的tr中name='对象[index].属性',必须有下标且下标要从0开始且要连续不能跳跃 (4)增加tr和td需要学习细节有: 创建td   var $tdName = $("<td class='in-ctt'></td>"); td添加内容   $td

Repeater 动态增加删除一行

文章参考:文章参考http://www.cnblogs.com/dataadapter/archive/2012/06/25/2562885.html 效果: 前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="rptTest.Default" %> <!DOCTYPE html

毕业设计---jQuery动态生成的a标签的事件绑定

这几天在毕业设计的前端设计阶段,准备放弃使用jsp,完全通过html+ajax+SSH进行网站的编写,在前端的页面显示我准备使用jQuery来实现数据的动态绑定.但是遇到动态添加的a标签无法直接通过$(element).click();来添加点击事件,通过网上的查询,在动态添加的标签绑定事件需要通过事件委托而非事件绑定. $("body").on("click", ".delete", function (){ del($(this).paren

jq动态添加的元素触发事件无效

<div class='a'> <div class='b'> </div> 其中$('.a')是html页面的元素,$('.b')是jq动态添加的元素.$(".b").click(function(){})方法失效 原来jq中动态添加的元素不能直接使用$(".b").click(function(){});的方法,要使用$(".a").on('click','.b',function(){}); $(&quo

jq的siblings对a标签不起效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

FineUI之动态增加列及修改列的实现

在FineUI的官方示例中有类似的实现.示例中实现了动态增加列,但有时我们可能需要动态修改列.先来看效果图 下面是代码实现 DynamicGrid.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DynamicGrid.aspx.cs" Inherits="FineUITest.DynamicGrid" %> <%@ Registe