Question

我使用以下代码在$（window）.load上使用jquery初始化一行按钮：

$(window).load(function() {
    var numButt = 0;

    randArr = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21]

    var Row = $(document.createElement('div')).attr("id", 'row1');
    Row.appendTo(".rows");

    for (;numButt < 22; numButt++){

        var newBut = $(document.createElement('span')).attr("id", 'but' + numButt);
        newBut.html('<input type="button" name="But' + numButt + '" id="case' + (numButt+1) + '" value= ' + randArr[numButt] + '>');
        newBut.appendTo($(".rows").find("#row1"));
        }
    }
 );

然后，我有这个来处理点击：

$(document).ready(function(){

    $(".rows > div > span > input").click(function () {
    alert(this.id);
    });
});

在脚本块结束后：

<div class='rows'>
    <div id='lol'>
        <span>
        <input type = 'button' name = 'test1' id = 'test1' value = 'test1'>
        </span>
        <span>
        <input type = 'button' name = 'test2' id = 'test2' value = 'test2'>
        </span>
    </div>

</div>

因此，拓扑上，我初始化的两个测试按钮和22个按钮之一应该是相同的。但它只能识别我点击两个测试按钮。我做错了什么？

Answer 1

由于其他按钮是动态添加的，因此您必须委派您的活动。您可以使用on()执行此操作。

$('.rows').on('click', 'input', function () {
    alert(this.id);
});

Answer 2

糟糕。我以相反的方式阅读你的问题。无论如何，我怀疑你在DOM上创建元素以及交替发出html标记的方式存在问题。相反，尝试编写20多个按钮的所有html标记，并执行该标记的一次性发射。像这样：$（“＃div1”）。html（buttons.split（''））//其中buttons是一个字符串数组，用于组成按钮的html。然后你的.click应该可以工作，因为我没有看到任何明显错误。

Jquery：具有相同拓扑但行为不同的子节点

2 个答案: