![10th]( "10th")
本文介绍了Jquery 附加的输入按钮在 .on(click) 中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
jsFiddle 我的代码:http://jsfiddle.net/8Vcyu/
我设置了一个表单，用户可以在其中输入 1 到 10 行信息.如果用户添加第 10 行，jquery 会删除添加行"按钮.如果第 10 行被删除，添加按钮就会回来.这一切都很好，但是当添加行"按钮被附加回页面时，它不再起作用 - 没有添加新行.任何帮助都非常感谢，这个问题让我很难过.
HTML
<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="你的名字" 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="您的账户名" 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><div id="add_row_button"><input type="button" name="add" value="Add" class="tr_clone_add"/>
<div class="clear"></div><input type="submit" value="Preview Your Card" class="preview_cards"/>
</表单>
JS
function countRows() {返回 $(".customize_table tr").length;}$(".closeRow").on('click', function() {$(this).closest('tr').remove();var $rows = countRows();如果($行== 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();如果($行
解决方案
你应该使用 on() 的委托方法 -
$('body').on('click', 'input.tr_clone_add', function(){...
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 附加的输入按钮在 .on(click) 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！