jquery触发错误
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title></title>
<script src="js/jquery-1.10.2.js" type="application/javascript"></script>
<script src="js/common.js" type="application/javascript"></script>
</head>
<body>
<canvas width="1920" height="500" id="myCanvas" class="title_01">
不好意思你的浏览器不支持html5 请使用谷歌浏览器或者火狐浏览器
</canvas>
<select id="select_hai" name="select">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3" >3</option>
</select>
</body>
</html>
// JavaScript Document
xiaoguo_1();
$(document).ready(function(){
// jQuery methods go here...
$('.title_01').click(function () {
$('.tcc').css("visibility","visible");
})
$('.comfire1').click(function () {
var getinput=$('#gettitle').val();
xiaoguo_1("ggge");
$('.tcc').css("visibility","hidden");
})
})
$(document).ready(function(){
// jQuery methods go here...
$('.title_02').click(function () {
$('.tcc').css("visibility","visible");
})
$('.comfire2').click(function () {
var getinput=$('#gettitle').val();
xiaoguo_2("fwe");
$('.tcc').css("visibility","hidden");
})
})
/*选择海报*/
$(document).ready(function(){
$('#select_hai').change(function () {
var select_haibaos=$('#select_hai').val();
switch (select_haibaos)
{
case '1':
xiaoguo_1();
break;
case '2':
xiaoguo_2();
break;
}
});
})
function xiaoguo_1(wenzi)
{
if(!arguments[0]) wenzi = "123";
$(document).ready(function(){
$('#myCanvas').removeClass();
$('#comfire').removeClass();
$('#myCanvas').addClass("title_01");
$('#comfire').addClass("comfire1");
/* var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img= new Image();
img.src="images/bigbanner.jpg";
img.onload = function () //确保图片已经加载完毕
{
ctx.drawImage(img,0,0);
ctx.font="20px Baroque Script";
ctx.fillText(wenzi,500,50);
ctx.font="30px Verdana";
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.fillStyle=gradient;
ctx.fillText("w3school.com.cn",10,90);
}*/
/*测试画布导出*/
/*$('.daochu').click(function () {
var img_png_src = c.toDataURL("image/png");
$('#image_png').attr('src', img_png_src);
$(function() {
$.ajax({
type: "POST",
// url: "index.php",
data: {location:img_png_src},
success: function(msg){
alert( "Data Saved: " + msg );
}
});
});
})*/
})
}
function xiaoguo_2(wenzi)
{
if(!arguments[0]) wenzi = "123";
$(document).ready(function(){
$('#myCanvas').removeClass();
$('#comfire').removeClass();
$('#myCanvas').addClass("title_02");
$('#comfire').addClass("comfire2");
/* var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img= new Image();
img.src="images/bigbanner2.jpg";
img.onload = function () //确保图片已经加载完毕
{
ctx.drawImage(img,0,0);
ctx.font="20px Baroque Script";
ctx.fillText(wenzi,500,50);
ctx.font="30px Verdana";
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.fillStyle=gradient;
ctx.fillText("w3school.com.cn",10,90);
}*/
/*测试画布导出*/
/* $('.daochu').click(function () {
var img_png_src = c.toDataURL("image/png");
$('#image_png').attr('src', img_png_src);
$(function() {
$.ajax({
type: "POST",
// url: "index.php",
data: {location:img_png_src},
success: function(msg){
alert( "Data Saved: " + msg );
}
});
});
})*/
})
}
我下拉菜单选择2后 画布的class明显改成了title_02 然后点击画布 为什么触发不是
$('.title_02').click(function () {
$('.tcc').css("visibility","visible");
})
而是触发了
$('.title_01').click(function () {
$('.tcc').css("visibility","visible");
})。。。这个为什么
[解决办法]
本帖最后由 showbo 于 2014-01-09 11:46:58 编辑 你要移除之前绑定的事件，要不会继续增加click事件
你那个直接给canvas绑定一个事件，判断下canvas当前class是什么不就行了，写那么多代码干嘛。。
这个代码看的蛋痛，一点思路都没有