jQuery的：具有相同拓扑结构，但不同的行为

我初始化使用jQuery的$（窗口）一排按钮使用此代码.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>

所以，拓扑，两个测试按钮和O我初始化的22个按钮中的ne应该是相同的。但它只识别我在两个测试按钮上的点击。我究竟做错了什么？

来源

2012-07-31 Squall Leohart

你是什么意思“脚本块结束后”？什么时候2个按钮被附加？ – AlvinfromDiaspar 2012-07-31 03:46:25

和，你尝试通过.on（）连接点击甚至？ http://stackoverflow.com/questions/4944293/jquery-liveclick-vs-click – AlvinfromDiaspar 2012-07-31 03:46:50

由于其他按钮正在动态添加，因此您必须委派您的事件。你可以用on()来做到这一点。

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

来源

2012-07-31 03:42:32 elclanrs

这看起来不错，你可能想添加输入的限定符[type ='button']。否则，.on属性应该可以工作。有什么理由可能需要使用.click？如果您使用jQuery 1.7或更高版本.on应该可以工作，1.6 .delegate可能是1.6或之前的版本，。1.4或之前的.live。 – jamesbar2 2012-07-31 03:48:12

谢谢。只是一个后续问题：我怎么不再需要'.rows> div> span> input'？或'.rows> div> span'至少 – 2012-07-31 04:58:53

你只需要什么是绝对必要的，在这种情况下'.rows'和'input'，其他所有的东西都是微不足道的。 – elclanrs 2012-07-31 05:00:12

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

来源

2012-07-31 03:56:03 AlvinfromDiaspar

jQuery的：具有相同拓扑结构，但不同的行为

回答

相关问题