带按钮的动态生成的输入不会得到一个onclick

-1

我想创建一个表单，允许动态添加额外的输入和输入的每一行都有一个按钮，点击时应该暴露额外的输入是可选的。带按钮的动态生成的输入不会得到一个onclick

遗憾的是，我似乎无法创建动态生成按钮的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/>

来源

2014-03-05 slashdottir

这，没有你的HTML结构的改变：

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

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

编辑：作为建议，更好地利用类这一点，如果你不这样做需要唯一（增加）的ID。

来源

2014-03-05 19:32:12 sinisake

甜蜜，那有效！谢谢！ – slashdottir

你需要使用事件代表团：

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

您可以使用您的形式或其他一些祖先的可用上略微提高性能作为选择器加载而不是document。

https://api.jquery.com/on

来源

2014-03-05 18:53:11 isherwood

是的，我已经尝试过这种技术。没有帮助。如果您可以通过演示解决方案的方式修改小提琴 - 这将有所帮助。 – slashdottir

除了特定选择器之外，此解决方案与您接受的答案相同。 – isherwood

我想是这样，当我尝试它不起作用。另一个人提供了一个演示其功能的小提琴。所以我接受了他的回答。最好的祝愿。 – slashdottir

带按钮的动态生成的输入不会得到一个onclick

回答

相关问题