JQuery点击事件只能工作一次

前端之家收集整理的这篇文章主要介绍了JQuery点击事件只能工作一次前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这是我已经有了
<html>
    <head>
    <link rel="stylesheet" type="text/css" href="reset.css" />
    <script src="jquery.js"></script>
    <script>
        $(function () {
            // Page Load
            //// Set default size of canvas
            var canvas_height = 124;
            var canvas_width = 124;
            //// Set starting point and first option point
            $('#canvas div:first-child').addClass('start');
            $('#canvas div:nth-child(2)').addClass('option');
            GenerateIDs();

            $('#btnID').click(function(){
                GenerateIDs();
            });

            // Generates IDs dynamically
            function GenerateIDs(){
                var row = 0;
                var col = 0;
                var lastdivposition = 0;
                $('#canvas div').each(function(){
                    if ($(this).position().top > lastdivposition)
                    {
                        row += 1;
                        col = 1;
                    }
                    else
                        col += 1;
                    $(this).attr('id',row + '-' + col);
                    lastdivposition = $(this).position().top
                });
            }

            $('.option').click(function(){
                if($(this).attr('id').split('-')[0] != $(this).next().attr('id').split('-')[0])
                {
                    $('.option').each(function(){
                        $(this).removeClass('option');
                    });
                    AddDivs('c')
                    GenerateIDs();
                    $(this).removeClass('option').removeClass('blank').addClass('object');
                    //$(this).next().addClass('option');
                    $('.object').each(function(){            
                        if($('#' + $(this).attr('id').split('-')[0] + '-' + (parseInt($(this).attr('id').split('-')[1]) + 1)).hasClass('blank'))
                            $('#' + $(this).attr('id').split('-')[0] + '-' + (parseInt($(this).attr('id').split('-')[1]) + 1)).removeClass('blank').addClass('option');
                        if($('#' + (parseInt($(this).attr('id').split('-')[0]) + 1) + '-' + $(this).attr('id').split('-')[1]).hasClass('blank'))
                            $('#' + (parseInt($(this).attr('id').split('-')[0]) + 1) + '-' + $(this).attr('id').split('-')[1]).removeClass('blank').addClass('option');
                    });
                }
            });

            // Adds row if type = r,column if type = c
            function AddDivs(type){
                if(type == 'r')
                {
                    canvas_height += 62;
                    $('#canvas').children('div').each(function(){
                        if($(this).position().top == $('#canvas div:first-child').position().top)
                            $('#canvas').append('<div class="blank"></div>');
                    });
                    $('#canvas').css('height',canvas_height + 'px');
                }
                if(type == 'c')
                {
                    canvas_width += 62;
                    $('#canvas').children('div').each(function(){
                        if($(this).position().left == $('#canvas div:first-child').position().left)
                            $('#canvas').append('<div class="blank"></div>');
                    });
                    $('#canvas').css('width',canvas_width + 'px');
                }                    
            }
        });
    </script>
    <style>
        #canvas,#toolBox {float:left; height:124px; margin:25px; padding:5px; width:124px;}
        .blank {background-color:gray;}
        .start {background-color:green;}
        .object {background-color:blue;}
        .option {background-color:yellow;}
        body div {border:1px solid black;}
        body div div {float:left; height:50px; margin:5px; width:50px;}
    </style>
</head>

<body>
    <div id="toolBox">
        <div></div>
        <div></div>
        <div></div>
        <div></div>        
    </div>
    <div id="canvas">
        <div class="start"></div>
        <div class="option"></div>
        <div class="blank"></div>
        <div class="blank"></div>
    </div>
    <br /><br />
    <div style="background-color:#AAAAAA; clear:left;">
        <input id="btnID" type="button" value="Generate IDs" />
        <input id="btnAddRow" type="button" value="Add Row" />
        <input id="btnAddCol" type="button" value="Add Col" />
         - LEGEND:
        <span style="color:green; font-size:20px; font-weight:bold;">START</span>
        <span style="color:yellow; font-size:20px; font-weight:bold;">OPTION</span>
        <span style="color:blue; font-size:20px; font-weight:bold;">OBJECT</span>
    </div>
</body>
</html>​

(这里是运行中的jsFiddle; http://jsfiddle.net/DUCY3/1/)

从长远来看,当您点击黄色时,应继续添加列/行。但是,它甚至没有第二次感测到点击事件。不知道为什么谢谢。

解决方法

你需要改变这一行:
$('.option').click(function() {  //etc

$('.option').live('click',function(){  //etc

这将确保所有“选项”框将获得onclick事件。请注意,在“on”的jQuery的更高版本中已经替换了live方法。见http://api.jquery.com/on/

编辑:使用’on’使用委托事件 – 类似这样:

$('#canvas').on('click','.option',function() { 
    //event handler...
}
原文链接:https://www.f2er.com/jquery/181711.html

猜你在找的jQuery相关文章