jQuery的附加输入按钮不。对功能（点击） [英] Jquery appended input button doesn't function with .on(click)
本文介绍了jQuery的附加输入按钮不。对功能（点击）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的code的的jsfiddle： http://jsfiddle.net/8Vcyu/
我已经安装形式，用户可以1和10日线的信息之间的输入。如果用户增加了10日线的jQuery删除'添加行按钮。如果10日线被删除添加按钮回来。这一切运作良好，但是当添加行按钮返回附加到网页中，就不再起作用 - 没有新行被添加。任何帮助真的是AP preciated，这个问题两腿发僵我。
HTML
＆LT;表格名称=输入行动=/发动机/ preview.phpENCTYPE =的multipart / form-data的ID =customizeForm方法=后＆GT;
＆LT; DIV ID =customize_container＆GT;
＆LT; DIV ID =customize_right＆GT;
＆LT;表类=customize_table＆GT;
＆所述; TR类=tr_clone＆GT;
＆所述; TD＆GT;
＆LT;输入类型=文本名称=称号[]值=NAMEMAXLENGTH =12/＆GT;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT;输入类型=文本名称=项[]值=你的名字MAXLENGTH =20/＆GT;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆所述; A HREF =＃类=closeRow＆GT;＆下; / A＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR类=tr_clone＆GT;
＆所述; TD＆GT;
＆LT;输入类型=文本名称=称号[]值=NAMEMAXLENGTH =12/＆GT;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT;输入类型=文本名称=项[]值=你的名字MAXLENGTH =20/＆GT;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; A HREF =＃类=closeRow＆GT;删除＆LT; / A＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR类=tr_clone＆GT;
＆所述; TD＆GT;
＆LT;输入类型=文本名称=称号[]值=NAMEMAXLENGTH =12/＆GT;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT;输入类型=文本名称=项[]值=你的IDMAXLENGTH =20/＆GT;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; A HREF =＃类=closeRow＆GT;删除＆LT; / A＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR类=tr_clone＆GT;
＆所述; TD＆GT;
＆LT;输入类型=文本名称=称号[]值=NAMEMAXLENGTH =12/＆GT;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT;输入类型=文本名称=项[]值=您的帐户名MAXLENGTH =20/＆GT;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; A HREF =＃类=closeRow＆GT;删除＆LT; / A＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR类=tr_clone＆GT;
＆所述; TD＆GT;
＆LT;输入类型=文本名称=称号[]值=LABELMAXLENGTH =12/＆GT;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT;输入类型=文本名称=项[]值=信息MAXLENGTH =20/＆GT;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; A HREF =＃类=closeRow＆GT;删除＆LT; / A＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; DIV ID =add_row_button＆GT;
＆LT;输入类型=按钮NAME =增加值=添加级=tr_clone_add/＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =清除＆GT;＆LT; / DIV＆GT;
＆LT;输入类型=提交值=preVIEW你的卡类=preview_cards/＆GT;
＆LT; / DIV＆GT;
＆LT; /表及GT;
JS
函数countRows（）{
返回$（customize_table TR）的长度。
}$（。closeRow）。在（'点击'，功能（）{
$（本）.closest（'TR'）删除（）;
变量$行= countRows（）;
如果（$行== 9）{
$（＃add_row_button）追加（＆LT;输入类型=按钮NAME ='添加'值='添加'类='tr_clone_ad/＆gt;中）;
}
}）;$（input.tr_clone_add）。在（'点击'，功能（）{
变量$行= countRows（）;
如果（$行＆LT; = 9）{
变量$ TR = $（table.customize_table TR：最后的孩子）;
变量$克隆= $ tr.clone（真）;
$ tr.after（$克隆）;
$行= countRows（）;
如果（$行== 10）{
$（。tr_clone_add）。remove（）方法
}
}
}）;$（文件）。就绪（函数（）{
$（＃customizeForm）。当作ajaxForm（{
成功：函数（responseText的）{
$ .fancybox（{
内容：responseText的，
'了minWidth'：800，
'了minHeight'：600，
'滚动'：'不'，
类型：IFRAME，
}）;
}
}）;
}）;
解决方案
您应该使用对代表团（）方法 -
$（'身体'）。在（'点击'，'input.tr_clone_add'，函数（）{...
jsFiddle of my code: http://jsfiddle.net/8Vcyu/
I have setup a form where the user can input between 1 and 10 lines of information. If the user adds a 10th line jquery removes the 'add row' button. If the 10th line is removed the add button comes back. This all works well, but when the 'add row' button is appended back into the page, it no longer functions - no new row is added. Any help is really appreciated, this problem is stumping me.
HTML
<form name="input" action="/engine/preview.php" enctype="multipart/form-data" id="customizeForm" method="post">
<div id="customize_container">
<div id="customize_right">
<table class="customize_table">
<tr class="tr_clone">
<td>
<input type="text" name="title[]" value="NAME" maxlength="12" />
</td>
<td>
<input type="text" name="entry[]" value="Your Name" maxlength="20" />
</td>
<td>
<a href="#" class="closeRow"></a>
</td>
</tr>
<tr class="tr_clone">
<td>
<input type="text" name="title[]" value="NAME" maxlength="12" />
</td>
<td>
<input type="text" name="entry[]" value="Your NAME" maxlength="20" />
</td>
<td>
<a href="#" class="closeRow">remove</a>
</td>
</tr>
<tr class="tr_clone">
<td>
<input type="text" name="title[]" value="NAME" maxlength="12" />
</td>
<td>
<input type="text" name="entry[]" value="Your ID" maxlength="20" />
</td>
<td>
<a href="#" class="closeRow">remove</a>
</td>
</tr>
<tr class="tr_clone">
<td>
<input type="text" name="title[]" value="NAME" maxlength="12" />
</td>
<td>
<input type="text" name="entry[]" value="Your Account Name" maxlength="20" />
</td>
<td>
<a href="#" class="closeRow">remove</a>
</td>
</tr>
<tr class="tr_clone">
<td>
<input type="text" name="title[]" value="LABEL" maxlength="12" />
</td>
<td>
<input type="text" name="entry[]" value="Information" maxlength="20" />
</td>
<td>
<a href="#" class="closeRow">remove</a>
</td>
</tr>
</table>
<div id="add_row_button">
<input type="button" name="add" value="Add" class="tr_clone_add" />
</div>
</div>
<div class="clear"></div>
<input type="submit" value="Preview Your Card" class="preview_cards" />
</div>
</form>
JS
function countRows() {
return $(".customize_table tr").length;
}
$(".closeRow").on('click', function() {
$(this).closest('tr').remove();
var $rows = countRows();
if($rows == 9) {
$("#add_row_button").append("<input type='button' name='add' value='Add' class='tr_clone_ad' />");
}
});
$("input.tr_clone_add").on('click', function() {
var $rows = countRows();
if($rows <= 9) {
var $tr = $("table.customize_table tr:last-child");
var $clone = $tr.clone( true );
$tr.after($clone);
$rows = countRows();
if($rows == 10) {
$(".tr_clone_add").remove()
}
}
});
$(document).ready(function() {
$("#customizeForm").ajaxForm({
success: function(responseText){
$.fancybox({
'content' : responseText,
'minWidth' : 800,
'minHeight' : 600,
'scrolling' : 'no',
'type' : 'iframe',
});
}
});
});
解决方案
You should use the delegation method of on() -
$('body').on('click', 'input.tr_clone_add', function(){...
这篇关于jQuery的附加输入按钮不。对功能（点击）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
