JQuery click event works only once

Question

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.

In future, please don't *just* include a link to jsFiddle. Your post should standalone from any other resource; consider what'd happen if jsFiddle went down in the future. — Matt, Apr 17 '12 at 16:07

Simon · Accepted Answer · 2012-04-18T08:14:08.097

40

You need to change this line:

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

to

$('.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...
}

edited Apr 18 '12 at 08:14

answered Apr 17 '12 at 16:04

Simon

5,373
1
34
46

4

Actually delegate() or on() would be better as live is deprecated in jQuery versions 1.7+ – Jay Blanchard Apr 17 '12 at 16:17
1

@JayBlanchard hence why I said that in my answer! I said 'live' because his jsFiddle used jQuery 1.5 – Simon Apr 17 '12 at 16:21
I'm was using 1.7.1 locally (just upped it to 1.7.2 now). Live works and On doesn't. $('.option').on('click', function(){ – Ber53rker Apr 17 '12 at 19:13
1

@Ber53rker see my edit - 'on' works differently when you want it to attach to elements that aren't yet created. See the bit of the docs starting from the sentence "Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on()" – Simon Apr 18 '12 at 08:15

RestingRobot · Answer 2 · 2017-10-06T21:28:04.300

28

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
});

edited Oct 06 '17 at 21:28

answered Apr 17 '12 at 16:53

RestingRobot

2,938
1
23
36

2

This is the best answer. – Vahid Amiri Jul 30 '16 at 19:29
1

A heads up to anyone using jq3.0+ - ["As of jQuery 3.0, .delegate() has been deprecated."](http://api.jquery.com/delegate/) – Hastig Zusammenstellen Apr 22 '17 at 14:03

score 0 · Answer 3 · edited Jul 02 '20 at 14:05

0

this.destroy();
location.reload();

Just add these lines at the end of js function.

edited Jul 02 '20 at 14:05

A.R.C.

910
11
22

answered Jul 02 '20 at 11:49

Abdul Rehman

1
1

JQuery click event works only once

3 Answers3

Linked

Related