Question

我正在实施一个tic tac toe游戏，但有一个特殊的规格，当我按下一个按钮它打开一个新的游戏DIV并禁用旧的按钮按下按钮必须在DIV等改变，但我有这里有一个小问题。为什么其他div中的按钮不像第一个那样起作用？

    <!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>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.xo {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    background-color: #F03;
    height: 300px;
    width: 310px;
    text-transform: capitalize;
    float: left;
}
.btn {
    background-color: #0C9;
    height: 100px;
    width: 100px;
}
</style>
<script>
var c = new Number(); 
c=0;
i=0;


var name = "xo"+c;

$(document).ready(function() {

    $(".btn").click(function(){
        alert("hi");
        newDiv = document.createElement("div");
        newDiv.className="xo";
        var $copy =$("#xo0").html()
        document.getElementById(name).appendChild(newDiv);
                var allChildNodes = document.getElementById(name).getElementsByTagName('*');
for(var i = 0; i < allChildNodes.length; i++)
{
   allChildNodes[i].disabled = true;
}   
        c++;
        name = "xo"+c;
        newDiv.id=name; 
        alert(name);

        $("#"+name).html($copy);
        $("#"+name).insertAfter($("#xo0"));

    });

});

</script>
</head>

<body>

<div align="left" class="xo" id="xo0">
    <input type="submit" class="btn" name="1" id="1" value="Submit" />
    <input type="submit" class="btn" name="2" id="2" value="Submit" />
    <input type="submit" name="3" class="btn" id="3" value="Submit" />

    <input type="submit" name="3" class="btn" id="4" value="Submit" />
    <input type="submit" name="3" class="btn" id="5" value="Submit" />
    <input type="submit" name="3" class="btn" id="6" value="Submit" />

    <input type="submit" name="3" class="btn" id="7" value="Submit" />
    <input type="submit" name="3" class="btn" id="8" value="Submit" />
    <input type="submit" name="3" class="btn" id="9" value="Submit" />

<br></br>
</div>
</body>
</html>

Answer 1

.click()函数仅将事件处理程序绑定到当前存在的匹配元素。要将处理程序附加到动态添加的元素，您可以使用.on()方法使用事件委派，如下所示：

$(document).on('click','.btn',function(){...})

重复的DIV按钮无法正常工作

1 个答案: