使用jquery往html添加的按钮,点击后没反应?求解惑

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用jquery往html添加的按钮,点击后没反应?求解惑相关的知识,希望对你有一定的参考价值。

$("#tjxjyzh").bind("click",function ()
alert("aaa");
);

添加按钮的语句是:$("</li><li width=8px style='float:right' ></li><li id='tjxzh' style='float:right '><input type='button' id ='tjxjyzh' value='添加新账号'/>").appendTo(".taobao_list_top_2 ul ");
页面能看到按钮的。但点击后没有alert啊。

参考技术A 首先添加按钮的语句好像里面的html闭合有问题,但这不是导致问题的原因
应该先添加后绑定事件,你的顺序是不是反了?
比如这样写应该就可以了
$("<li>").css(float:"right",width:8).append("<input type='button' id='tjxjyzh' value='添加新帐号'/>").appendTo(".taobao_list_top_2 ul");
$("#tjxjyzh").click(function()alert('aaa'));

更简单的写法
$('<li>').css(float:'right',width:8).append($('<input type="button"/>').val('添加新帐号').click(function()
alert('click')
)).appendTo('.taobao_list_top_2 ul');
如果还不行可以联系我的hi coddykilly追问

先试试,太谢谢啦。

参考技术B 最简单的方式是jquery用1.4以后的,把bind改为live即可
原因是bind对新添加的事件不会动态绑定本回答被提问者采纳
参考技术C <!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-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function()
var buttonNew = $("<input type='button' value='Click' id='but'/>");
$("#button").append(buttonNew);
//这是一种方法
/* $("input:button").click(function()
alert("click");
);*/
//这是另外一种方法
$("#but").bind("click",function()
alert("click1");
);
);
</script>

<title>无标题文档</title>
</head>

<body>
<div id="button"></div>
</body>
</html>
我在这写了一个例子给你 你看看 里面有两种方式 你自己研究下 看懂了改下自己的代码追问

这个看得懂,但不是这样的问题。。谢谢

追答

那你把完整的代码贴出来 我瞧瞧

参考技术D 一个最简单的例子,你一定看的懂
<!DOCTYPE HTML >
<html>
<head>
<title>事件委托</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.clickme
color:red;

</style>
<SCRIPT type=text/javascript src="js/jquery-1.4.2.js"></SCRIPT>
<script type="text/javascript">

$(".clickme").live('click', function()
alert("live");
$("body").append('<div class="clickme">click here</div>');
);
</script>
</head>
<body>
<div class="clickme">Click here</div>
</body>
</html>

解释:

使用 .bind() 时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有,所以点击这个元素不会有任何效果。
.live() 方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 .live() 的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 DOM 树的根节点上。

jQuery找错:题目如下?点击按钮没反应

var jBtn = $("#btn2");
jBtn.click(function ()
alert('按钮2被点击了');
);
<input type="button" id="btn2" value="按钮2" />

参考技术A <input type="button" id="btn2" value="按钮2" />

/
/引入jQuery.js
<script>
var jBtn = $("#btn2");

jBtn.click(function ()
alert('按钮2被点击了');
);
</script>
您的js代码要卸载html代码后,不然就使用下面代码放在html前面
$(document).ready(function()

var jBtn = $("#btn2");

jBtn.click(function ()
alert('按钮2被点击了');
);
);追问

我没写$(function() );

本回答被提问者采纳
参考技术B <!DOCTYPE html>
<html>
<head>
<title>3</title>
</head>
<body>
<h2>this is a heading</h2>
<p>this is a paragragh.</p>
<p class = "two">this is another paragragh.</p>
<button id="hide" type = "button" >Click hidden</button>
<button id="show" type = "button">Click shown </button>
</body>
<script src = "jquery-1.11.1.min.js"></script>
<script type = "text/javascript" >
$(document).ready(function()
$("#hide").click(function()
$(".two").hide();
);
$("#show").click(function()( //错误在这里这里应该是function()
$(".two").show();
));

)
</script>
</html>
参考技术C <!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>pro.html</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$ (function ()

var jBtn = $ ("#btn2");
jBtn.click (function ()

alert ('按钮2被点击了');
);
);
</script>
</head>
<body>
<input type="button" id="btn2" value="按钮2" />
</body>
</html>

以上是关于使用jquery往html添加的按钮,点击后没反应?求解惑的主要内容,如果未能解决你的问题,请参考以下文章

windows 任务管理器无法打开,点击后没反应的解决方法(windows2016 测试有效)

centos6启动虚拟机时,是不是加载环境点击后没反应

用JS 点击按钮改变宽高! 往大神赐教啊!

jQuery找错:题目如下?点击按钮没反应

jquery uploadify按钮点击没反应,但点击按钮右边空白才弹出选择文件对话框

怎么用JQuery动态添加div 比如 添加 点击一次添加按钮 增加一个div