Question

这是JSFiddle http://jsfiddle.net/T8fUY/

一个非常简单的情况。动态添加输入字段，并在必要时删除它们。我见过无数的例子，但我无法使用删除功能。这是我的HTML：

<ol> 
    <li id="caseform-FileUploader">
        <input type="button" id="caseform-AddFile" value="Add File"> 
        <ul>
        </ul>
    </li>
</ol>

这是我的JQuery：

var filenumber = $('li#caseform-FileUploader ul li').size() + 1; // set which file number this is

$("#caseform-AddFile").click(function () {
    //add the input within the ul that is in #caseform-FileUploader
    $('<li><input type="file" name="upload' + filenumber + '"/> <a href="#" id="caseform-RemoveFileUpload">Remove</a></li>').appendTo("#caseform-FileUploader ul");
    filenumber++;
    return false;
});

//When the hyperlink is clicked, remove this parent li
$('#caseform-RemoveFileUpload').on('click', function () {
    if (filenumber > 0) {
        $(this).parent('li').remove();
        filenumber--;
    }
    return false;
});

它完全添加输入....但是当用户点击删除超链接时，删除功能不起作用。

有人可以帮忙吗？

Answer 1

您需要事件委派，以绑定动态添加元素的事件。您在标识为caseform-RemoveFileUpload的元素上绑定事件的时间不存在，但稍后在caseform-AddFile单击事件处理程序中添加。

$(document).on('click', '#caseform-RemoveFileUpload', function () {
    if (filenumber > 0) {
        $(this).parent('li').remove();
        filenumber--;
    }
    return false;
});

委托活动

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。通过选择一个保证在当时存在的元素委托事件处理程序附加，您可以使用委托事件避免频繁附加和删除事件处理程序reference。

Answer 2

您需要将event delegation用于动态创建的元素。您需要传递最近的静态容器。

//When the hyperlink is clicked, remove this parent li
$("#caseform-FileUploader").on('click','#caseform-RemoveFileUpload', function () {
    if (filenumber > 0) {
        $(this).parent('li').remove();
        filenumber--;
    }
    return false;
});

此外，由于ID必须是唯一的，我建议您使用caseform-RemoveFileUpload锚

的类

DEMO

Answer 3

不要使用id作为删除按钮，因为id必须是唯一的（你要添加多个具有相同id的删除按钮），使用class属性对它们进行分组。

在处理动态元素时需要使用event delegation

//don't use id selector with element selector
var filenumber = $('#caseform-FileUploader ul li').size() + 1; // set which file number this is

$("#caseform-AddFile").click(function () {
    //add the input within the ul that is in #caseform-FileUploader
    $('<li><input type="file" name="upload' + filenumber + '"/> <a href="#" class="caseform-RemoveFileUpload">Remove</a></li>').appendTo("#caseform-FileUploader ul");
    filenumber++;
    return false;
});

//When the hyperlink is clicked, remove this parent li
$('#caseform-FileUploader').on('click', '.caseform-RemoveFileUpload', function () {
    if (filenumber > 0) {
        $(this).parent('li').remove();
        filenumber--;
    }
    return false;
});

演示：Fiddle

Answer 4

您已动态添加元素。他们必须工作。

 $(document).on('click', '#caseform-RemoveFileUpload', function () {
if (filenumber > 0) {
    $(this).parent('li').remove();
    filenumber--;
}
return false;
});

http://jsfiddle.net/T8fUY/1/

无法从表单中动态删除输入元素

4 个答案:

委托活动