jquery点击事件执行两次，jquery怎么触发点击事件
大家好，如果您还对jquery点击事件执行两次不太了解，没有关系，今天就由本站为大家分享jquery点击事件执行两次的知识，包括jquery怎么触发点击事件的问题都会给大家分析到，还望可以解决大家的问题，下面我们就开始吧！
jquery中$ready和window.onload的区别
做web开发时常用Jquery中$(document).ready()和JavaScript中的window.onload方法，两者都是要在页面加载完成以后加载的方法，但是这两者还是有很大区别的。最近遇到了这样的问题，查询了多篇文章，做一下总结。
简单来说，要以用以下张表来表示：
Jquery的ready()与Javascrpit的load()
window.onload()$(document).ready()
加载时机
必须等待网页全部加载完毕（包括图片等），然后再执行JS代码
只需要等待网页中的DOM结构加载完毕，就能执行JS代码
执行次数
只能执行一次，如果第二次，那么第一次的执行会被覆盖
可以执行多次，第N次都不会被上一次覆盖
举例
以下代码无法正确执行：
window.onload= function(){ alert(“text1”);};
window.onload= function(){ alert(“text2”);};
结果只输出第二个
以下代码正确执行：
$(document).ready(function(){alert(“Hello”)});
$(document).ready(function(){alert(“Hello”)});
结果两次都输出
简写方案无$(function(){})
一般情况下window的load()都是用来设置body标签的onload事件.但onload事件是要在页面的元素全部加载完了才触发的,这也包括页面上的图片，以及大的表格数据。如果页面上图片较多或图片太大,加载需要较多时间，就会导致页面无响应，或者用户做了其它操作了。
而Jeuery中的ready()则是在页面的dom(节点)加载完后就可以做相应的操作,而不用等待全部元素加载完成.比如只知道页面某处有一张图片，而不一定要等它显示出来就可以为它绑定点击方法。
load()一般不建议使用，这里主要讲一下($(selector).ready())。
原理:
在jquery脚本加载的时候,会设置一个isReady的标记,监听DOMContentLoaded事件(这个不是什么浏览器都有的,不同浏览器,jquery运作方式不一样).当然遇到调用ready函数的时候,如果isReady未被设置,那就是说页面未加载完,就会把要执行的函数用一个数组缓存起来,当页面加载完后,再把缓存的函数一一执行.
Jquery中的详细代码分析:
ready: function(fn){//绑定监听器bindReady();//如果 DOM加载完成if( jQuery.isReady)//马上运行此函数fn.call( document, jQuery);//否则保存起来else//把函数加入缓存数组中jQuery.readyList.push( function(){ return fn.call(this, jQuery);});return this;
}
当然，jquery对不同的浏览器dom加载完成的通知 bindReady()函数也是不同的
var readyBound= false;function bindReady(){if( readyBound) return;
readyBound= true;// Mozilla,opera,webkitnightlies支持DOMContentLoaded事件if( document.addEventListener&&!jQuery.browser.opera)//直接使用事件回调即可document.addEventListener("DOMContentLoaded", jQuery.ready, false);//如果是ie并且不是嵌在frame中//就需要不断地检查文档是否加载完if( jQuery.browser.msie&& window== top)(function(){if(jQuery.isReady) return;try{document.documentElement.doScroll("left");
} catch( error){setTimeout( arguments.callee, 0);return;
}// and execute any waiting functionsjQuery.ready();
})();if( jQuery.browser.opera)
document.addEventListener("DOMContentLoaded", function(){if(jQuery.isReady) return;for(var i= 0; i< document.styleSheets.length; i++)
if(document.styleSheets[i].disabled){
setTimeout( arguments.callee, 0);return;
}// and execute any waiting functionsjQuery.ready();
}, false);if( jQuery.browser.safari){var numStyles;
(function(){if(jQuery.isReady) return;if( document.readyState!="loaded"&& document.readyState!="complete"){
setTimeout( arguments.callee, 0);return;
}if( numStyles=== undefined)
numStyles= jQuery("style, link[rel=stylesheet]").length;if( document.styleSheets.length!= numStyles){
setTimeout( arguments.callee, 0);return;
}// and execute any waiting functionsjQuery.ready();
})();
}// A fallback to window.onload, that will always workjQuery.event.add( window,"load", jQuery.ready);
}
}
jquery点击一个事件更换图片,在点击更换回来
这是你现在的结构；建议星星图标可以用作背景图片；
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>无标题文档</title>
<scripttype="text/javascript"src=""></script>
</head>
<body>
<style>
*{margin:0;padding:0;}
ul.stars{display:block;margin:100px100px30px;overflow:hidden;}
ul.starsli{display:block;float:left;padding:04px;cursor:pointer;}
ul.starsliimg{display:block;width:30px;height:30px;}
ul.starsliimg.full{display:none;}
ul.starsli.onimg.empty{display:none;}
ul.starsli.onimg.full{display:block;}
</style>
<script>
$(document).ready(function(e){
$("ul.starsli").click(function(){
$(this).toggleClass("on");
varstars=$("ul.stars").find("li.on").size();
$("input#stars").val(stars);
});
});
</script>
<formmethod="get">
<ulclass="stars">
<li>
<imgclass="empty"src=""/>
<imgclass="full"src=""/>
</li>
<li>
<imgclass="empty"src=""/>
<imgclass="full"src=""/>
</li>
<li>
<imgclass="empty"src=""/>
<imgclass="full"src=""/>
</li>
<li>
<imgclass="empty"src=""/>
<imgclass="full"src=""/>
</li>
<li>
<imgclass="empty"src=""/>
<imgclass="full"src=""/>
</li>
</ul>
<inputtype="hidden"id="stars"name="stars"/>
<inputtype="submit"value="提交"style="margin:0100px;">
</form>
</body>
</html>最好的方式是把图片处理一下作为ul的背景图，通过点击li获取索引值来改变ul的背景图片位置；不能上传附件了。。还是上代码吧。。
<!DOCTYPEHTML>
<html>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metahttp-equiv="X-UA-Compatible"content="IE=EmulateIE7"/>
<metaname="keywords"content=""/>
<metaname="description"content=""/>
<title>评价</title>
<scripttype="text/javascript"src=""></script>
<script>
$(document).ready(function(){
//星级评分
$("formpspan.radiolabel.radio").click(function(){
$(this).parent("span.radio").css("background-position-y",-($(this).index()*19)+"px");
});
});
</script>
<style>
*{margin:0;padding:0;}
formp{display:block;overflow:hidden;padding:10px20px;}
formplabel{display:block;height:36px;line-height:36px;color:#444;font-size:14px;float:left;}
formpspan.radio{display:block;width:150px;height:19px;background:url(stars.png)left0pxno-repeat;float:left;margin:8px00;}
formpinput.radio{display:none;}
formplabel.radio{width:20%;height:100%;margin:0;cursor:pointer;}
forminput.btn{display:block;width:210px;height:36px;line-height:36px;*line-height:normal;color:#fff;font-size:15px;background:#ffb81f;border:0;border-radius:6px;cursor:pointer;float:left;margin-top:10px;}
</style>
<body>
<form>
<p>
<label>服务态度：</label>
<spanclass="radio">
<inputclass="radio"type="radio"name="star1"value="0"checked/>
<labelclass="radio"for="star11"></label>
<labelclass="radio"for="star12"></label>
<labelclass="radio"for="star13"></label>
<labelclass="radio"for="star14"></label>
<labelclass="radio"for="star15"></label>
<inputid="star11"class="radio"type="radio"name="star1"value="1"/>
<inputid="star12"class="radio"type="radio"name="star1"value="2"/>
<inputid="star13"class="radio"type="radio"name="star1"value="3"/>
<inputid="star14"class="radio"type="radio"name="star1"value="4"/>
<inputid="star15"class="radio"type="radio"name="star1"value="5"/>
</span>
</p>
<p>
<label>运输速度：</label>
<spanclass="radio">
<inputclass="radio"type="radio"name="star2"value="0"checked/>
<labelclass="radio"for="star21"></label>
<labelclass="radio"for="star22"></label>
<labelclass="radio"for="star23"></label>
<labelclass="radio"for="star24"></label>
<labelclass="radio"for="star25"></label>
<inputid="star21"class="radio"type="radio"name="star2"value="1"/>
<inputid="star22"class="radio"type="radio"name="star2"value="2"/>
<inputid="star23"class="radio"type="radio"name="star2"value="3"/>
<inputid="star24"class="radio"type="radio"name="star2"value="4"/>
<inputid="star25"class="radio"type="radio"name="star2"value="5"/>
</span>
</p>
<p>
<label>货款发放：</label>
<spanclass="radio">
<inputclass="radio"type="radio"name="star3"value="0"checked/>
<labelclass="radio"for="star31"></label>
<labelclass="radio"for="star32"></label>
<labelclass="radio"for="star33"></label>
<labelclass="radio"for="star34"></label>
<labelclass="radio"for="star35"></label>
<inputid="star31"class="radio"type="radio"name="star3"value="1"/>
<inputid="star32"class="radio"type="radio"name="star3"value="2"/>
<inputid="star33"class="radio"type="radio"name="star3"value="3"/>
<inputid="star34"class="radio"type="radio"name="star3"value="4"/>
<inputid="star35"class="radio"type="radio"name="star3"value="5"/>
</span>
</p>
<p>
<inputclass="btn"type="submit"value="提交"/>
</p>
</form>
</body>
</html>附上图片素材
jquery 当用回车键执行change事件后在IE8下面焦点自动跳转
楼主你想实现什么功能?其实你所说的有点问题，你写的那个方法是在文本框值发生改变的时候写的，这时候你敲回车，其实相当于直接点按钮提交页面，在这之前，文本框失去交点，这时候文本框的值跟原来的就会不同，触发change事件，接着触发click事件，这是理所应该的
好了，文章到此结束，希望可以帮助到大家。