Fatal编程技术网
  • jquery/
  • JQuery单击事件只工作一次

JQuery单击事件只工作一次

jquery

JQuery单击事件只工作一次,jquery,Jquery,以下是我已经得到的： <html> <head> <link rel="stylesheet" type="text/css" href="reset.css" /> <script src="jquery.js"></script> <script> $(function () { // Page Load //// Set d

以下是我已经得到的：

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


$（函数（）{
//页面加载
////设置画布的默认大小
var canvas_height=124；
var canvas_width=124；
////设置起点和第一个选项点
$（'#canvas div:first child'）.addClass（'start'）；
$（“#canvas div:nth child（2）”.addClass（'option'）；
GenerateIDs（）；
$（'#btnID'）。单击（函数（）{
GenerateIDs（）；
});
//动态生成ID
函数GenerateIDs（）{
var行=0；
var-col=0；
var lastdivposition=0；
$（'#canvas div'）。每个（函数（）{
if（$（this）.position（）.top>lastdivposition）
{
行+=1；
col=1；
}
其他的
col+=1；
$（this.attr（'id'，row+'-'+col）；
lastdivposition=$（this）.position（）.top
});
}
$（'.option'）。单击（函数（）{
if（$（this.attr（'id'）.split（'-'）[0]！=$（this.next（）.attr（'id'）.split（'-'）[0]）
{
$（'.option'）。每个（函数（）{
$（this.removeClass（'option'）；
});
AddDivs（'c'）
GenerateIDs（）；
$（this）.removeClass（'option'）.removeClass（'blank'）.addClass（'object'）；
//$（this.next（）.addClass（'option'）；
$（'.object'）。每个（函数（）{
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'）；
});
}
});
//如果类型为r，则添加行；如果类型为c，则添加列
函数AddDivs（类型）{
如果（类型=='r'）
{
帆布高度+=62；
$（'#canvas'）。子项（'div'）。每个（函数（）{
if（$（this.position（）.top==$（“#canvas div:first child”）.position（）.top）
$（'#canvas'）。追加（''）；
});
$（'#canvas'）.css（'height'，canvas#u height+'px'）；
}
如果（类型=='c'）
{
画布宽度+=62；
$（'#canvas'）。子项（'div'）。每个（函数（）{
if（$（this.position（）.left==$（'#canvas div:first child'）.position（）.left）
$（'#canvas'）。追加（''）；
});
$（'#canvas'）.css（'width'，canvas#u width+'px'）；
}                    
}
});
#画布，#工具箱{浮动：左；高度：124px；边距：25px；填充：5px；宽度：124px；}
.blank{背景色：灰色；}
.start{背景色：绿色；}
.object{背景色：蓝色；}
.选项{背景色：黄色；}
body div{边框：1px纯黑；}
body div div{float:left；高度：50px；边距：5px；宽度：50px；}



-图例：
开始
选项
对象
​
（这里是一个正在运行的jsFiddle；）

基本上，从长远来看，当您单击黄色按钮时，它应该继续添加列/行。但第二次它甚至没有感觉到咔嗒声。不知道为什么。谢谢。

您需要更改此行：

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

这将确保所有“选项”框都将获得onclick事件。请注意，在jQuery的更高版本中，live方法已被替换为“on”。看

编辑：要与“on”一起使用，请使用委派事件-类似于以下内容：

$('#canvas').on('click', '.option', function() { 
    //event handler...
}
我会使用委托函数（以防您选择更新到jquery的更新版本）

2017编辑：委托函数已被弃用，正确用法如下：

$(document).on('click', '.option', function(){
    //etc
});
只需在js函数的末尾添加这些行。

以后，请不要只包含指向JSFIDLE的链接。你的文章应该独立于任何其他资源；考虑一下JSfDeldDead将来会发生什么情况。实际上，委托（）或ON（）会更好，因为JavQuery版本1.7 + @ JayBrChanDad中的Live被禁止，因此我在回答中说了这一点。我之所以说“live”，是因为他的JSFIDLE使用了jQuery1.5I，而我在本地使用的是1.7.1（现在刚刚升级到1.7.2）。生活是有用的，而生活不是$（'.option'）.on（'click'，function（）{@Ber53rker see my edit-'on'当您希望它附加到尚未创建的元素时，它的工作方式不同。请参阅文档中从以下句子开始的部分：“事件处理程序仅绑定到当前选定的元素；它们必须在代码调用.on（）时存在于页面上。”这是最好的答案。向所有使用jq3.0+的人致敬- 
$(document).delegate('.option', 'click', function(){
    //etc
});

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

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