Question

请参阅以下代码示例：

代码1：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.redbox
{
    background-color:#F00;
    border:thin solid #C90;
    width: 50px;
    height:50px;

}
.grnbox
{
    background-color:#0F0;
    border:thin solid #C90;
    width: 50px;
    height:50px;

}


</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script language="javascript">
k=0;
$(function()
{
    $(".redbox").click(function(e) {
        if(k%2 == 0)
        {
        $("#container").append("<div class='grnbox'>&nbsp;</div>");     
        alert($(".grnbox").length + " green");
        }
        else
        {
        $("#container").append("<div  class='redbox'>&nbsp;</div>");    
        alert($(".grnbox").length + " red");
        }
        k++;
    });


    $(".grnbox").on('click',function() {
            alert($(".grnbox").length + " green");
            return true;
            });
});



</script>
</head>
<html>
<body>
<div id="container"><div class = "redbox"></div>  </div>
</body>
</html>

代码2：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.redbox
{
    background-color:#F00;
    border:thin solid #C90;
    width: 50px;
    height:50px;

}
.grnbox
{
    background-color:#0F0;
    border:thin solid #C90;
    width: 50px;
    height:50px;

}


</style>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script language="javascript">
k=0;
$(function()
{
    $(".redbox").click(function(e) {
        if(k%2 == 0)
        {
        $("#container").append("<div class='grnbox'>&nbsp;</div>");         
        }
        else
        {
        $("#container").append("<div  class='redbox'>&nbsp;</div>");    
        }
        k++;
    });


    $(".grnbox").on('click',function() {
            alert($(".grnbox").length + " green");
            return true;
            });
});



</script>

</head>

<body>

<div id="container"><div class = "redbox"></div>  </div>
</body>
</html>

在上述两种情况下，click事件都无法正常工作。在第一种情况下，动态添加的框中不会触发单击事件。在第二个代码中对于绿色和红色（如果代码更改为计数redbox es）框，计数出现的方式不同即使计数相同。

我用代码3解决了这个问题：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.redbox
{
    background-color:#F00;
    border:thin solid #C90;
    width: 50px;
    height:50px;

}
.grnbox
{
    background-color:#0F0;
    border:thin solid #C90;
    width: 50px;
    height:50px;

}


</style>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script language="javascript">
k=0;
$(function()
{
    $(".redbox").click(function(e) {
        if(k%2 == 0)
        {
        $("#container").append("<div class='grnbox'>&nbsp;</div>");         
        }
        else
        {
        $("#container").append("<div  class='redbox'>&nbsp;</div>");    
        }
        k++;
    });


    $("#container").on('click',".grnbox",function() {
            alert($(".grnbox").length + " green");
            return true;
            });
    $("#container").on('click',".redbox",function() {
            alert($(".redbox").length + " red");
            return true;
            });         

});



</script>

</head>

<body>

<div id="container"><div class = "redbox"></div>  </div>
</body>
</html>

但为什么它在代码1和代码中不起作用？ 2＆pi;

Jquery事件动态链接到未按预期触发的动态对象

0 个答案: