Jquery 附加的输入按钮在 .on(click) 中不起作用 [英] Jquery appended input button doesn't function with .on(click)
问题描述
jsFiddle 我的代码:http://jsfiddle.net/8Vcyu/
我设置了一个表单，用户可以在其中输入 1 到 10 行信息.如果用户添加第 10 行，jquery 会删除添加行"按钮.如果第 10 行被删除，添加按钮就会回来.这一切都很好，但是当添加行"按钮被附加回页面时，它不再起作用 - 没有添加新行.任何帮助都非常感谢，这个问题让我很难过.
HTML
<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();如果($行<= 9){var $tr = $("table.customize_table tr:last-child");var $clone = $tr.clone( true );$tr.after($clone);$rows = countRows();如果($行== 10){$(".tr_clone_add").remove()}}});$(document).ready(function() {$("#customizeForm").ajaxForm({成功:功能(响应文本){$.fancybox({'内容':响应文本，'minWidth' : 800,'minHeight':600，'滚动':'不'，'类型':'iframe'，});}});});你应该使用 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) 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
