Question

我在这里写了这段代码：

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">   </script>
</head>


<body>

    <button id="add_field">Noch ein Inputfeld</button>
    <hr>
    <div class="input_fields">


    </div>


    <script>
        $(function(){

            var number = 1;

            $("#add_field").click(function(){
                if(number < 11){
                    var name = "input";
                    name = name + number;
                    $(".input_fields").append('<a>'+ number +':</a><input type="text" name="' + name + '" /><a href="#" class="remove_field">entfernen</a><br>');
                    number++;
                }
                else{
                    alert("10 ist Max");    
                }
            });

            $(".remove_field").click(function(){
                $(this).parent('input').remove();
                x--;
            });
        });
    </script>
</body>

我可以创建输入字段，但是如果我按下 loeschen 按钮，则没有任何反应。所以我觉得这个函数错了：

$(".remove_field").click(function(){
    $(this).parent('input').remove();
    x--;
});

Answer 1

尝试这样的事情：

$('.input_fields').on('click', '.remove_field', function(){
    $(this).parent('input').remove();
    x--;
});

您需要为事件处理程序使用委托模式。

您可能也对以下内容感兴趣：

Your fiddle fixed（请注意，如果您希望它们处理从中间删除的输入，您需要重新显示数字的逻辑）

https://developer.chrome.com/devtools/docs/javascript-debugging

JQuery event handlers not firing

https://api.jquery.com/on/

Answer 2

您需要使用事件委派将事件附加到动态添加的元素：

$("body").on("click",".remove_field",function(){
  $(this).parent('input').remove();
  number--;
});

<强> Working Demo

jquery创建和删除输入字段

2 个答案: