使用按钮动态生成的输入没有点击答案

【问题标题】：dynamically generated inputs with buttons don't get an onclick使用按钮动态生成的输入没有点击
【发布时间】：2014-03-05 18:47:38
【问题描述】：

我想创建一个允许动态添加附加输入的表单，并且输入的每一行都有一个按钮，单击该按钮应显示可选的附加输入。

很遗憾，我似乎无法为动态生成的按钮创建一个 onclick 处理程序来执行任何操作

感谢您提供任何线索

Here is a fiddle which demonstrates the problem

这里的代码与小提琴中的代码相同：

css 和 javascript:...

<style>
#time_est_input {
    display: none
}
</style>

<script>
$(document).ready(function () {
    $("#button-time-est").click(function () {
        $("#time_est_input").toggle();
    });
});
var g_ = new Object();
g_.counter = 1;

function addAnotherItem() {
    var input = document.createElement("input");
    input.title = "item";
    input.type = "text";
    input.id = "item" + g_.counter.toString();
    input.value = "";

    var inputCat = document.createElement("input");
    inputCat.title = "category";
    inputCat.type = "text";
    inputCat.id = "category" + g_.counter.toString();
    inputCat.value = "";

    var tesid = "time_est_input" + g_.counter.toString();

    var timeEstSpan = document.createElement("span");
    timeEstSpan.id = tesid;
    timeEstSpan.style.cssText = "display:none;";

    var timeEstButton = document.createElement("input");
    timeEstButton.title = "Add Time Estimate";
    timeEstButton.type = "button";
    timeEstButton.value = "+";
    timeEstButton.id = "time_est_button" + g_.counter.toString();
    timeEstButton.setAttribute("myspan", tesid);
    timeEstButton.onClick= function() {
        var tesid = this.getAttribute('myspan');
        var myspan = $(tesid);
        myspan.toggle();
    }; 

    var inputTimeEst = document.createElement("input");
    inputTimeEst.title = "time estimate";
    inputTimeEst.type = "text";
    inputTimeEst.id = "time_est" + g_.counter.toString();
    inputTimeEst.value = "";

    timeEstSpan.appendChild(inputTimeEst);
    var br = document.createElement("br");
    $('#form_list_parent').append(input);
    $('#form_list_parent').append(inputCat);
    $('#form_list_parent').append(timeEstButton);
    $('#form_list_parent').append(timeEstSpan);
    $('#form_list_parent').append(br);
    $(input).focus();

    g_.counter += 1;
}
</script>

HTML:...

Desired behavior:<br>
<input type=text id="item" title="item" autofocus></input>
<input type=text id="category" title="category"></input>
<input title="add time estimate" type="button" id="button-time-est" value="+"> 
<span id="time_est_input">
   <input type='text' id='time_est' title="time estimate"/>
</span>
<hr/>
    Dynamically generated inputs with buttons don't behave as above:<br>
        <p id="form_list_parent"></p>
        <input type="button" id="additembutton" value="add item"     onclick="addAnotherItem()" />
        <br/>

【问题讨论】：

标签： jquery button dynamic onclick toggle

【解决方案1】：

在这里，无需更改您的 html 结构：

$(document).ready(function () {
$( "body" ).on( "click", "input[id^='time_est_button']", function() {
$(this).next().toggle();
});   
});

http://jsfiddle.net/BTS4A/10/

编辑：按照建议，如果您不需要唯一的（递增的）id，最好使用类。

【讨论】：

【解决方案2】：

您需要使用事件委托：

$(document).on('click', "#button-time-est", function () {
    $("#time_est_input").toggle();
});

您可以通过使用您的表单或在加载时可用的其他祖先作为选择器而不是 document 来略微提高性能。

https://api.jquery.com/on

【讨论】：

是的，我已经尝试过这种技术。没有帮助。如果您可以以演示您的解决方案的方式修改小提琴 - 这将有所帮助。
除了特定的选择器之外，此解决方案与您接受的答案相同。
我想是的，当我尝试时它不起作用。另一个人提供了一个展示其功能的小提琴。所以我接受了他的回答。最良好的祝愿。