jQuery click事件仅工作一次 [英] JQuery click event works only once
本文介绍了jQuery click事件仅工作一次的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我已经拥有的:
<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/)
(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.
推荐答案
您需要更改此行:
$('.option').click(function() { //etc
到
$('.option').live('click', function(){ //etc
这将确保所有选项"框都将收到onclick事件.请注意，在jQuery的更高版本中，live方法已替换为"on".请参见 http://api.jquery.com/on/
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/
与'on'一起使用时，使用委托事件-像这样:
to use with 'on' use delegated events - something like this:
$('#canvas').on('click', '.option', function() {
//event handler...
}
这篇关于jQuery click事件仅工作一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
