jquery触发错误

kkk6965921k 2014-01-09 09:34:44 
<!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");

    })


。。。这个为什么
...全文
253 14 打赏 收藏 转发到动态 举报
写回复
用AI写文章
14 条回复
切换为时间正序
请发表友善的回复…
发表回复
chenzhi246265 2014-01-09
  • 打赏
  • 举报
 回复
别用click绑定事件，用live或者on方法绑定事件试试咯，因为你用click绑定事件的时候canvas还没该class，所以没注册事件，后面加上了class貌似click不支持后面添加的
kkk6965921k 2014-01-09
  • 打赏
  • 举报
 回复
引用 8 楼 showbo 的回复:
你要移除之前绑定的事件，要不会继续增加click事件 你那个直接给canvas绑定一个事件，判断下canvas当前class是什么不就行了，写那么多代码干嘛。。 这个代码看的蛋痛，一点思路都没有
没办法我一定要用这个方法的 其他方法都不行 我刚刚unbind以后。。。。。点击没反应了 纠结 前面已经改成
$('.title_02').bind("click",function(){
      $('.tcc').css("visibility","visible");
    })
Go 旅城通票 2014-01-09
  • 打赏
  • 举报
 回复
你要移除之前绑定的事件，要不会继续增加click事件

你那个直接给canvas绑定一个事件，判断下canvas当前class是什么不就行了，写那么多代码干嘛。。


这个代码看的蛋痛，一点思路都没有
allali 2014-01-09
  • 打赏
  • 举报
 回复
引用 6 楼 u013420095 的回复:
引用 5 楼 u013135393 的回复:
哈哈哈，最简单的方法就是把三个点击的click事件写在 $('#select_hai').change事件里面
我不是都写在里面了吗。。

$(document).ready (function(){
            $("#myCanvas").click(function(){
                $('.tcc').css("visibility","visible");
            });
        });
你的title_01，title_02，title_03执行的都是$('.tcc').css("visibility","visible"); 直接拿id绑就可以了啊 还要不要到处加$(document).ready 一个就够了
kkk6965921k 2014-01-09
  • 打赏
  • 举报
 回复
引用 5 楼 u013135393 的回复:
哈哈哈，最简单的方法就是把三个点击的click事件写在 $('#select_hai').change事件里面
我不是都写在里面了吗。。
a565465 2014-01-09
  • 打赏
  • 举报
 回复
哈哈哈，最简单的方法就是把三个点击的click事件写在 $('#select_hai').change事件里面
kkk6965921k 2014-01-09
  • 打赏
  • 举报
 回复
引用 3 楼 MengYouXuanLv 的回复:
[quote=引用 2 楼 u013420095 的回复:] [quote=引用 1 楼 MengYouXuanLv 的回复:] click事件是绑在控件上的而不是class，你把class改了事件还是保留的
呵呵 我还是不是很明白 我应该怎么改呢。。[/quote] 你要什么效果 还有你的$(document).ready是在不同的js文件里还是1个里面 看你的代码都不知道要做什么效果[/quote]下来菜单1 选择1 canvas class="title_01" 保证$('.title_01').click能触发 选择2 就变成了class="title_02" 保证$('.title_02').click能触发 选择3 就变成了class="title_03" 保证$('.title_03').click能触发
allali 2014-01-09
  • 打赏
  • 举报
 回复
引用 2 楼 u013420095 的回复:
[quote=引用 1 楼 MengYouXuanLv 的回复:] click事件是绑在控件上的而不是class，你把class改了事件还是保留的
呵呵 我还是不是很明白 我应该怎么改呢。。[/quote] 你要什么效果 还有你的$(document).ready是在不同的js文件里还是1个里面 看你的代码都不知道要做什么效果
kkk6965921k 2014-01-09
  • 打赏
  • 举报
 回复
引用 1 楼 MengYouXuanLv 的回复:
click事件是绑在控件上的而不是class，你把class改了事件还是保留的
呵呵 我还是不是很明白 我应该怎么改呢。。
allali 2014-01-09
  • 打赏
  • 举报
 回复
click事件是绑在控件上的而不是class，你把class改了事件还是保留的
chenzhi246265 2014-01-09
  • 打赏
  • 举报
 回复
引用 11 楼 u013420095 的回复:
[quote=引用 10 楼 chenzhi246265 的回复:] 别用click绑定事件，用live或者on方法绑定事件试试咯，因为你用click绑定事件的时候canvas还没该class，所以没注册事件，后面加上了class貌似click不支持后面添加的
下来菜单1 选择1 canvas class="title_01" 保证$('.title_01').click能触发 选择2 就变成了class="title_02" 保证$('.title_02').click能触发 选择3 就变成了class="title_03" 保证$('.title_03').click能触发 你有什么好的方法么。。。。。。。。我上面的代码肯定不行的 感觉要重写 给点思路哈[/quote] click() 触发、或将函数绑定到指定元素的 click 事件 live() 为当前或未来的匹配元素添加一个或多个事件处理器 这是w3cschool上面对着两个方法的解释，我觉得应该是你给dom元素加click事件的时候页面中此时没有class为2的，后面有了但click不能动态的给未来匹配的元素添加事件 解决办法是1：通过live方法绑定事件试试 2：在$('#myCanvas').addClass("title_02");这句话后面添加绑定事件，这种方法应该能解决问题 具体没试，应该能行吧
Go 旅城通票 2014-01-09
  • 打赏
  • 举报
 回复
$('#comfire').click(function () { var getinput = $('#gettitle').val(); if(this.className == 'comfire1')xiaoguo_1("ggge"); else xiaoguo_2("fwe"); $('.tcc').css("visibility", "hidden"); }) 更新一下。调用的函数不一样，没注意看
Go 旅城通票 2014-01-09
  • 打赏
  • 举报
 回复
引用 9 楼 u013420095 的回复:
[quote=引用 8 楼 showbo 的回复:] 你要移除之前绑定的事件，要不会继续增加click事件 你那个直接给canvas绑定一个事件，判断下canvas当前class是什么不就行了，写那么多代码干嘛。。 这个代码看的蛋痛，一点思路都没有
没办法我一定要用这个方法的 其他方法都不行 我刚刚unbind以后。。。。。点击没反应了 纠结 前面已经改成
$('.title_02').bind("click",function(){
      $('.tcc').css("visibility","visible");
    })
[/quote] 你这2个class选择器不都是选择$('#myCanvas')这个对象，干么用class选择器？而且2个点击事件都执行的一样的代码，你写成2个干嘛？ .comfire1这个也一样 
    $(document).ready(function () {
        xiaoguo_1();
        $('#myCanvas').click(function () {
            $('.tcc').css("visibility", "visible");
        });
        $('#comfire').click(function () {
            var getinput = $('#gettitle').val();
            xiaoguo_1(this.className == 'comfire1' ? "ggge" : 'fwe');
            $('.tcc').css("visibility", "hidden");
        })/*
        $('.comfire1').click(function () {
            var getinput = $('#gettitle').val();
            xiaoguo_1("ggge");
            $('.tcc').css("visibility", "hidden");
        })
        $('.comfire2').click(function () {
            var getinput = $('#gettitle').val();
            xiaoguo_2("fwe");
            $('.tcc').css("visibility", "hidden");
        })
        
        */
        $('#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";
        $('#myCanvas').removeClass();
        $('#comfire').removeClass();
        $('#myCanvas').addClass("title_01");
        $('#comfire').addClass("comfire1");
    }

    function xiaoguo_2(wenzi) {
        if (!arguments[0]) wenzi = "123";
        $('#myCanvas').removeClass();
        $('#comfire').removeClass();
        $('#myCanvas').addClass("title_02");
        $('#comfire').addClass("comfire2");
    }
kkk6965921k 2014-01-09
  • 打赏
  • 举报
 回复
引用 10 楼 chenzhi246265 的回复:
别用click绑定事件，用live或者on方法绑定事件试试咯，因为你用click绑定事件的时候canvas还没该class，所以没注册事件，后面加上了class貌似click不支持后面添加的
下来菜单1 选择1 canvas class="title_01" 保证$('.title_01').click能触发 选择2 就变成了class="title_02" 保证$('.title_02').click能触发 选择3 就变成了class="title_03" 保证$('.title_03').click能触发 你有什么好的方法么。。。。。。。。我上面的代码肯定不行的 感觉要重写 给点思路哈
jQuery.mouseDelay jQuery 延时器，防错误触发
内容索引:脚本资源,jQuery,jQuery,mouseDelay,延时器　jQuery 延时器：jQuery.mouseDelay v1.2 　作用：延时操作目的是为了防止用户误触发事件，一般情况下鼠标指针小于150毫秒的停留时间都可以被忽略。 　演示：...
jQuery EasyUI 1.4.5 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示
jQuery EasyUI 1.4.5版本更新内容： Bug（修复） datagrid：修复在调用updateRow方法之后使用getChanges方法无法返回被更新的行的BUG； treegrid：修复在追加或插入新行的时候触发onLoadSuccess事件的BUG； tree...
JQuery快速入门教程
课程目标什么是jQuery 是一个JavaScript的函数库 jQuery是一个轻量级的JavaScript库 浏览器兼容比较好 jQuery可以简化JavaScript代码适用人群Java初级开发人员，JavaScript初学者，web前端开发人员课程简介 课程目标...
jQuery EasyUI 1.3.5 离线简体中文API文档
combo：修复点击页面某一个combo组件的下拉列表时触发的“onHidePanel”事件会导致页面上其他combo组件的下拉列表被关闭的问题； combogrid：修复某些从combo组件继承来的方法无法使用的问题。 Improvement（改进...
jquery.zeroclipboard:绑定到“ beforecopy”，“ copy”，“ aftercopy”和“ copy-error”事件，使用jQuery的特殊事件API和ZeroClipboard的Core模块生成的用于剪贴板注入的自定义类DOM事件。
如果发生任何基础ZeroClipboard错误事件，则将触发copy-error错误事件。 在aftercopy事件处理程序全部被触发或停止之后， click事件也会冒泡。 先决条件 ZeroClipboard需要使用Flash Player 11.0.0或更高版本。 ...
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章