JQuery click event works only once

Here is what I have already:

<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>

(and here is a jsFiddle of it in operation; http://jsfiddle.net/DUCY3/1/)

Basically in the long term it should continue to add columns/rows when you click the yellow. But it's not even sensing the click event the second time. Not sure why. Thanks.

Solution 1:

You need to change this line:

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

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

This will ensure that all 'option' boxes will get the onclick event. Note that the live method has been replaced in later versions of jQuery with 'on'. See http://api.jquery.com/on/

EDIT: to use with 'on' use delegated events - something like this:

$('#canvas').on('click', '.option', function() { 
    //event handler...
}

Solution 2:

I would use the delegate function, (just in case you ever choose to update to a newer version of jquery),

$(document).delegate('.option', 'click', function(){
    //etc
});

2017 Edit: The delegate function has been deprecated, the correct usage would now be

$(document).on('click', '.option', function(){
    //etc
});

JQuery click event works only once

Solution 1:

Solution 2:

Related

Recent Posts