共有 1978 人关注过本帖
标题：JS的click事件输出html
点击一次就消失？
等　级：新手上路
&&已结贴√
&&问题点数：20&&回复次数：6&&&
JS的click事件输出html
点击一次就消失？
&script src=&jquery.js& type=&text/javascript&&&/script&
&meta charset=&utf-8&&
&form&&method=&post&&
&&&&&&&&&span&id: &input type=&text& name=&id& id=&id&/&&/span&
&&&&&&&span id=&insert&&&/span&&/div&
&&&&div& &input type=&submit&&&id=&btn&/&&/div&
&script type=&text/javascript&&
&&& $(function(){
&&&&&&&&$(&#btn&).click(function(){
&&&&&&&&&&&&val=$(&input[name='id']&).val();
&&&&&&&&&&&&$(&#insert&).html(val);
&&&&&&&&&&&// $(&#id&).after($newlist);
&&&&&&&&&&&&//alert(val);
&&&&&&&&});
搜索更多相关主题的帖子:
等　级：新手上路
我想把那个值打印出来
来　自：北京
等　级：友情版主
威　望：120
帖　子：8067
专家分：6655
document.getElementByID('btn').onclick = function(){
&&& document.getElementByID('insert').innerHTML = document.getElementByID('id').
这样就搞定了，一定要用jQuery吗？
本来无一物，何处惹尘埃
It is empty at all here, Why pm 2.5 is so TMD high!
来　自：北京
等　级：友情版主
威　望：120
帖　子：8067
专家分：6655
当然如果你一定要用Jquery，那就这么写
(function(){
&&& $(&#btn&).click(function(){
&&&&&&&&$(&#insert&).html($(&#id&).val());
你写的val=$(&input[name='id']&).val();中有两个地方需要吐槽一下
1、val变量一定要用var定义，否则会val就将是全局变量，是非常不好的习惯，这样会和其他代码造成不可预想的冲突，切记切记！
2、input[name='id']少用这样的查找方式，你都定义id属性了，为什么不用？你这样写将会在页面中所有DOM元素（就是标签）中遍历查找，是非常浪费资源的，能够精确定位就少用查找，不是说不能用你这种方式，但是你应该将这种查找定位在一个相对狭小的空间内，比如在&span&id: &input type=&text& name=&id& id=&id&/&&/span&中给span标签加个id，然后在这个span中查找，会快的多。
本来无一物，何处惹尘埃
It is empty at all here, Why pm 2.5 is so TMD high!
来　自：北京
等　级：友情版主
威　望：120
帖　子：8067
专家分：6655
还有个槽点，$(function(){，这句中加什么$符号啊，jQuery中有这样的用法吗？$这个符号是作为css选择器使用的，不是用来定义匿名函数的！
本来无一物，何处惹尘埃
It is empty at all here, Why pm 2.5 is so TMD high!
版权所有，并保留所有权利。
Powered by , Processed in 0.028158 second(s), 8 queries.
Copyright&, BCCN.NET, All Rights Reserved后使用快捷导航没有帐号？
只需一步，快速开始
查看: 8511|回复: 10
如何使用javascript（或jquery）实现click的前事件(beforeclick)?
UID617193在线时间 小时积分14帖子离线17083 天注册时间
新手上路, 积分 14, 距离下一级还需 36 积分
使用场景：
& &&&页面上有很多不同元素，选定某个元素的时候，有一个编辑属性得到的区域可以编辑元素的属性，如果对属性做了修改，则每次通过鼠标（或键盘）切换选定不同元素的时候，都会先弹出确认提示框询问：“是否要保存对属性的修改？”，有三个按钮（按钮可以自定义为任意多个）
选择“是”就先保存再切换到新元素，
选择“否”就不保存，直接切换到新元素，
选择“取消”就什么也不做，焦点还在原来的元素上。
& & 每次选择其他元素的时候，我会弹出一个浮动层，模拟confirm的效果，然后根据在弹出层里选择的按钮，决定接下来是否要切换到新元素上。
& & 因为在弹出浮动层的时候，并不能阻止新元素上的click事件继续执行默认行为，所以如果能有一个beforeclick这样的事件，在正式执行元素的click事件之前，先执行beforeclick事件，根据beforeclick事件返回的ture或false来决定是否要正式执行click事件就好了！
& & 我的问题是该如何模拟这个beforeclick事件，或者这样的应用场景该如何实现比较好？（支持常用浏览器最新版本即可）
UID617193在线时间 小时积分14帖子离线17083 天注册时间
新手上路, 积分 14, 距离下一级还需 36 积分
没人知道吗？
UID515391在线时间 小时积分539帖子离线17083 天注册时间
高级会员, 积分 539, 距离下一级还需 461 积分
不懂。javascript的话有addListnerEvent监听事件。
用过jquery的unbind()去除所有click事件然后再加上click$().unbind(&click&).click(fn);
UID584019在线时间 小时积分5245帖子离线17083 天注册时间
因为在弹出浮动层的时候，并不能阻止新元素上的click事件继续执行默认行为
什么叫不能阻止新元素的click默认行为？你不click不就不执行了
UID584019在线时间 小时积分5245帖子离线17083 天注册时间
本帖最后由 daddy 于
14:01 编辑
&a href=&.hk& onclick=&return confirm('你要继续吗?')&&click&/a&
&提示：您可以先修改部分代码再运行
UID222398在线时间 小时积分26390帖子离线17083 天注册时间
可以用来阻止 onclick 的是 onmousedown
&a href=&.hk&
onmousedown=&return confirm('1. 你要继续吗?')& onclick=&return confirm('2. 你还要继续吗?')&&click&/a&
&提示：您可以先修改部分代码再运行
UID617193在线时间 小时积分14帖子离线17083 天注册时间
新手上路, 积分 14, 距离下一级还需 36 积分
hutia 发表于
可以用来阻止 onclick 的是 onmousedown
按你这个，onclick不会执行啊
UID617193在线时间 小时积分14帖子离线17083 天注册时间
新手上路, 积分 14, 距离下一级还需 36 积分
daddy 发表于
什么叫不能阻止新元素的click默认行为？你不click不就不执行了
就是因为click导致焦点移走了。
其实要的就是类似 confirm的效果，只不过用浮动层来实现，因为浮动层可以自定义按钮
UID387318在线时间 小时积分3514帖子离线17083 天注册时间
金牌会员, 积分 3514, 距离下一级还需 1486 积分
点击-&判断内容是还否更改-&（是）弹出询问框-&为每个按钮绑定事件（或为询问框绑定“选择”事件）-&按选择执行事件
& && && && && && && && && && && && &-&（否）直接切换
UID222398在线时间 小时积分26390帖子离线17083 天注册时间
cn2018 发表于
按你这个，onclick不会执行啊
好久没用 IE，都忘记 IE 这个傻缺浏览器会直接阻止 onclick 了。。。。
不过不要紧啊，按你原来的思路，不是要暂时阻止原本的 onclick 嘛，那么你就在你的模拟 confirm 框弹出的时候，给原本的按钮绑定上 onmousedown 事件。然后在模拟 confirm 框关闭的时候移除这个 onmousedown 事件不就行了
UID577054在线时间 小时积分1181帖子离线17083 天注册时间
银牌会员, 积分 1181, 距离下一级还需 1819 积分
楼主的思路额。。。好像把事情搞麻烦了。。。
Powered by$(function(){
var patientId=$(&a&).attr(&patientId&);
}),在页面中&tr patientId=&${patientId}&&
2、onclick事件
一）js修改onclick动作的四种方式
复制代码 代码示例:
button.onclick = Function(&alert('hello');&);&
复制代码 代码示例:
button.onclick = function(){alert(&hello&); };&
复制代码 代码示例:
button.onclick = myA&
&function myAlert(){&
& alert(&hello&);&
这种情况更加动态，更为实用，而且还能添加多个函数(添加的事件的顺序即执行顺序)。&
复制代码 代码示例:
if(window.addEventListener){ // Mozilla, Netscape, Firefox&
&& //element.addEventListener(type,listener,useCapture);&&
&& button.addEventListener('click', alert('11'), false);&
&& button.addEventListener('click', alert('12'), false);//执行顺序11 -& 12&
} else { // IE&
&& button.attachEvent('onclick', function(){alert('21');});&
&& button.attachEvent('onclick', function(){alert('22');});执行顺序22 -& 21&
实例讲解：&&
复制代码 代码示例:
button.onclick = Function(&alert('31');&);&
&&& button.onclick = Function(&alert('32');&);&
&&& button.onclick = Function(&alert('33');&); //如果这样写,那么将会只有最后一个方法被执行&
&&& button.attachEvent(&onclick&, function(){alert('41');});&
&&& button.attachEvent(&onclick&, function(){alert('42');});&
&&& button.attachEvent(&onclick&, function(){alert('43');}); //如果这样写,三个方法都会被执行&
&&& //当然，也可以这样写&
&&& button.onclick = Function(&alert('51');&);&
&&& button.attachEvent(&onclick&, function(){alert('52');});&
&&&& //对应移除事件&
&&& detachEvent('onclick',func);//ie下使用删除事件func&
&&& removeEventListener('click',func);//Mozilla下，删除事件func&&&
二）JS动态设置标签的onclick属性
使用JS动态设置标签的onclick属性对应方法，不能直接使用=&方法名& 的方式&
复制代码 代码示例:
document.getElementById(&id&).onclick =&methodName();&//错误&
正确应使用=funciton(){methodsName}&
document.getElementById(&id&).onclick = function() {//正确&
&submitHobby();&
补充，设置传参的onclick函数，可以用jquery的click方法，如下：
复制代码 代码示例:
$(qtyObj).next().next().click(function(){&
&&&&&&& auVillusUsed(id0,id1,id2);&&&
$(qtyObj).next().next().click(function(e){&
&&& var obj=e.&
&&& //再通过e.target去获取需要的变量参数。&
});&您可能感兴趣的文章：JQuery怎么不能触发click事件了？-Web开发/JavaScript-javascript-电脑编程网JQuery怎么不能触发click事件了？-Web开发/JavaScript作者：iijse　和相关&&JScript code
$( function() {
$(&.addBtn&).click( function() {
addNode($(this));
}).end();
})
function addNode(cur) {
if(cur.parent().has(&ul&).size() != 0) {
cur.parent().children(&ul:first&).append(&&li&okok&a href='script:void(0);' class='addBtn'&[Add]&/a&&/li&&)
cur.parent().append(&&ul&&li&new menu&a href='script:void(0);' class='addBtn'&[Add]&/a&&/li&&/ul&&);
}
|
页面上的HTML代码是：HTML code
&div&
&ul id=&tree&&
&li&&a href=&#&&menu1&/a&&a href=&javascript:void(0);& class=&addBtn&&[Add]&/a&&/li&
&li&menu2&a href=&javascript:void(0);& class=&addBtn&&[Add]&/a&&/li&
&li&menu3&a href=&javascript:void(0);& class=&addBtn&&[Add]&/a&&/li&
&/ul&
&/div&
但是这样子，使用js动态添加的[Add]按钮不会触发click事件，只有页面上原有的才会触发。代码用firebut看过，没有问题，只是点击add没有反应。这是怎么回事?只能添加 onClick=属性吗？这样子好不爽。。------回答---------------其他回答（20分）---------
在网上查了一下，解决方法如下，假设有你的&a&标签中有id属性JScript code
$(&.addBtn&).live('click', function() {
var id = $(this).attr(&id&);
alert(id);
用到live函数委派事件，用于动态生成的HTML关于live函数的用法自己去网上查吧
相关资料：｜｜｜｜｜｜｜JQuery怎么不能触发click事件了？-Web开发/JavaScript来源网络，如有侵权请告知，即处理！编程Tags：　　　　　　　　　　　　　　　　&