我正在尝试模拟这个 jsfiddle (代码也如下所示)并修改它以允许用户最多添加 4 个字段
JS:
$(function() {
var scntDiv = $('#p_scents');
var i = $('#p_scents p').size() + 1;
$('#addScnt').live('click', function() {
$('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
i++;
return false;
});
$('#remScnt').live('click', function() {
if( i > 2 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
HTML:
<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>
<div id="p_scents">
<p>
<label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
</p>
</div>
此外,我尝试为最新版本的 jQuery 1.11.0 修改和更新代码,更新函数,.live()
到 .on()
和 .size()
到 .length()
每个 jQuery 文档,但没有运气......代码没有那样工作。
非常感谢任何帮助。
最佳答案
你必须使用 .on()附加事件处理程序。另外,将 ID 替换为 class,因为将有多个输入元素。
您可以使用属性 .length获取元素的数量
为了删除,您必须委托(delegate)事件,因为删除 anchor 标记将动态添加到 DOM。像这样 $('#p_scents').on('click','.remScnt', function(){ });
这适用于 jQuery 1.10.1
总的来说,应该做这样的事情。
$(function () {
var scntDiv = $('#p_scents');
var i = $('.p_scnt').length;
$('#addScnt').on('click', function () {
if (i >= 4) return;
$('<p><label for="p_scnts"><input type="text" class="p_scnt" size="20" name="p_scnt_' + i + '" value="" placeholder="Input Value" /></label> <a href="#" class="remScnt">Remove</a></p>').appendTo(scntDiv);
i++;
});
$('#p_scents').on('click', '.remScnt', function () {
if (i > 0) {
$(this).closest('p').remove();
i--;
}
});
});
这是一个演示 http://jsfiddle.net/dhirajbodicherla/tZPg4/13620/
您还可以将添加功能改进为更清晰的代码
$('#addScnt').on('click', function () {
if (i >= 4) return;
var newInput = $('<input type="text" size="20" name="p_scnt_' + i + '" placeholder="Input value" />');
var removeLink = $('<a href="#" class="remScnt">Remove</a></p>');
var newEl = $('<p></p>').append(newInput).append(removeLink);
newEl.appendTo(scntDiv);
i++;
});
关于javascript - jQuery - 允许用户最多添加 4 个 div/用户输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30897566/