Question

我正在尝试动态生成元素调用函数，或者由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>

JS

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/

Answer 1

使用.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/

Answer 2

更改此行

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

要：

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

Answer 3

您不能拥有仅包含数字的id元素：

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

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

3 个答案: