重复的 DIV 按钮不起作用

Question

我正在实现一个井字游戏，但有特殊说明，当我按下一个按钮时，它会打开一个新的游戏 DIV 并禁用旧的 DIV，并且按下的按钮必须在两个 DIV 等中更改，但我有这里有个小问题。 为什么另一个 div 函数中的按钮不像第一个那样工作？

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"));
    });
});

.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;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    
<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>
</div>

Answer 1

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

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