28

これが私がすでに持っているものです：

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

基本的に、長期的には、黄色をクリックしたときに列/行を追加し続ける必要があります。しかし、2回目のクリックイベントも検出していません。理由はわかりません。ありがとう。

4

3 に答える 3

38

この行を変更する必要があります:

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

に

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

これにより、すべての「オプション」ボックスが onclick イベントを受け取るようになります。live メソッドは、以降のバージョンの jQuery では「on」に置き換えられていることに注意してください。http://api.jquery.com/on/を参照してください。

編集:「オン」で使用するには、委任されたイベントを使用します-次のようなもの:

$('#canvas').on('click', '.option', function() { 
    //event handler...
}
于 2012-04-17T16:04:17.013 に答える
27

デリゲート関数を使用します (新しいバージョンの jquery に更新することを選択した場合に備えて)、

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

2017 編集:デリゲート関数は廃止されました。正しい使用法は次のようになります。

$(document).on('click', '.option', function(){
    //etc
});
于 2012-04-17T16:53:42.783 に答える