使用jQuery选择动态创建的元素

-2

我试图让动态生成的元素调用函数，或者由jquery选择做另一个动作。迄今为止没有多少运气。使用jQuery选择动态创建的元素

HTML

<button id="staticButton">static button</button> 
<button id="onClickButton" onclick="onClickFunction()">onClick button</button> 

<div id="from-static"><h3>buttons created using static button</h3></div> 
<div id="from-dynamic"><h3>buttons created using dynamic buttons</h3></div>

element_number = 1; 

$('#staticButton').on('click', function(){ 
    $('#from-static').append(
     '<button id=' + element_number + ' >' + 'Dynamic Button #' + element_number + ' generated by static button</button> <br/>' 
    ); 
    element_number = element_number + 1; 
});

我怎么会选择新生成的按钮？

$('?').on('click', function(){ 
    var currentId = $(this).attr('id'); 
    $('#from-dynamic').append(
     '<button id=' + element_number + ' >' + 'Dynamic Button #' + element_number + ' generated by Button #: ' + currentId + '</button> <br/>' 
    ); 
    element_number = element_number + 1; 
});

另一种方法也许是：一个onclick事件添加到调用函数

function onClickFunction(){ 
    alert("should this work?"); 
}

但点击按钮，我得到生成按钮：ReferenceError: onClickFunction is not defined

http://jsfiddle.net/waspinator/5RgWh/

来源

2014-04-17 waspinator

委托事件... https://learn.jquery.com/events/event-delegation/ –

您[搜索？]（https://www.google.com/search?q=attach+events+to +动态+元素+网站：+ stackoverflow.com） - 这里有相当多的**网页**。 – George

对不起，我猜我在搜索。 – waspinator

代表点击事件使用.on()

element_number = 1; 

$('#button0').on('click', function(){ 
    $('#from-static').append(
     '<button id=' + element_number + ' class="btn" >' + 'Element #' + element_number + '</button> <br/>' 
    ); 
    element_number = element_number + 1; 
}); 

// function to handle dynamically generated buttons 
$(document).on('click','.btn', function(){ 
    var currentId = $(this).attr('id'); 
    $('#from-dynamic').append(
     '<button id=' + element_number + ' >' + 'Element #' + element_number + ' Generated by: ' + currentId + '</button> <br/>' 
    ); 
    element_number = element_number + 1; 
});

http://jsfiddle.net/5RgWh/1/

来源

2014-04-17 15:07:26 AbstractChaos

你不能只包含了许多的id元素：

http://www.w3.org/TR/html401/types.html#type-name

来源

2014-04-17 15:07:35

这是有效的HTML5甚至仍然不支持CSS使用ID选择器 –

@ A.Wolff互联网流量的大块不支持HTML5。它还没有正式发布。 –

但是关于这种行为的规格是固定的，CSS4也会支持它。这就是说，你是对的。编辑：但无论如何，这并没有在这里回答OP的问题 –

改变这一行

$('?').on('click', function(){

要：

$('#from-static').on('click','button', function(){

来源

2014-04-17 15:10:18

使用jQuery选择动态创建的元素

回答

相关问题