Question

让我说我的页面上有这样的div：

<div style="padding-top:10px;" id="message2">
    <p>More Links: <span class="fa fa-plus add"></span></p>
    <div class="appending_div">
        <div class="blog_links">
            <p class="blog_linku_1">
                Link URL 1: <input type="text" name="blog_linku_1[]"> &nbsp; Link Name 1:  <input type="text" name="blog_linkn_1[]">
            </p>
        </div>
    </div> 
</div>

如果用户点击 + 符号，它就会添加另一个输入字段，就像这个脚本一样：

$(document).ready(function() {
    var i = 2;
    $('.add').on('click', function() {
        var field = '<p class="link'+i+'">Link URL '+i+': <input type="text" name="blog_linku_'+i+'[]"> &nbsp; Link Name '+i+':  <input type="text" name="blog_linkn_'+i+'[]">&nbsp;<span class="glyphicon glyphicon-minus minus" id="minus'+i+'"></span></p>';
        $('.appending_div').append(field);
        i = i+1;
    })
    $('#minus'+i+'').click(function(){
        $(".link"+i+"").remove();
    }); 
})

如果你提到，额外的链接包含一个删除符号，这是一个 - 符号，点击此符号，应该删除具有类link"+i+"的段落。

现在问题是当你点击它时，删除图标不起作用。并且控制台栏不会显示任何错误消息。

那你对此有什么看法，我该如何解决这个问题呢？

Answer 1

首先，最好将事件附加到公共类而不是使用递增值

示例：

error: GuardedBy is not a repeatable annotation type

注意：由于您将输入名称用作数组var i = 2; $('.add').on('click', function() { var field = '<p class="link">Link URL ' + i + ': <input type="text" name="blog_linku[]">   Link Name ' + i + ': <input type="text" name="blog_linkn[]"> <span class="glyphicon glyphicon-minus minus">----</span></p>'; $('.appending_div').append(field); i++; });，因此您无需使用索引生成输入名称。

将点击事件附加到[]时，您需要使用事件委派 .on() ，因为元素是动态生成的：

.minus

＆＃13;

$('body').on('click','.minus', function() {
    $(this).closest('p').remove();
});

＆＃13;

$(document).ready(function() {
  var i = 2;
  $('.add').on('click', function() {
    var field = '<p class="link">Link URL ' + i + ': <input type="text" name="blog_linku[]"> &nbsp; Link Name ' + i + ':  <input type="text" name="blog_linkn[]">&nbsp;<span class="glyphicon glyphicon-minus minus">DELETE</span></p>';
    $('.appending_div').append(field);
    i++;
  });

  $('body').on('click', '.minus', function() {
    $(this).closest('p').remove();
  });
})

＆＃13;

Answer 2

我稍微重构了你的代码。见下文：

$(document).ready(function() {
    var i = 2;
    $('.add').on('click', function() {
        $('<p class="link' + i + '">Link URL ' + i + ': <input type="text" name="blog_linku_[]" /> &nbsp; Link Name' + i + ':  <input type="text" name="blog_linkn_[]"> &nbsp; <span class="fa fa-minus minus"></span></p>')
            .appendTo('.appending_div');
        i = i + 1;
    });
    
    $('.appending_div').on('click.remove', '.minus', function () {
        $(this).parent()
            .remove();
    });
})

<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="padding-top:10px;" id="message2">
    <p>More Links: <span class="fa fa-plus add"></span></p>
    <div class="appending_div">
        <div class="blog_links">
            <p class="blog_linku_1">
                Link URL 1: <input type="text" name="blog_linku_1[]"> &nbsp; Link Name 1:  <input type="text" name="blog_linkn_1[]">
            </p>
        </div>
    </div> 
</div>

我简化了代码的顶部部分，将元素添加到屏幕上。由于您使用的是 jQuery ，因此您可以将其中的一些步骤与其库函数的链接结合起来。

对于事件处理，因为元素是动态添加的，所以需要将事件委托给新元素。回想一下，要绑定事件的页面上必须存在元素。否则，必须将事件委派给现有元素。 jQuery 将处理事件的抽象和“冒泡”到父元素。

Answer 3

您正在#minus 点击添加$(".add")元素，因此当DOM加载时无法找到$("#minus")。您必须在$("#minus") 点击中添加$(".add") 点击功能。

尝试以下代码

$(document).ready(function() {
    var i = 2;
    $('.add').on('click', function() {
        var field = '<p class="link'+i+'">Link URL '+i+': <input type="text" name="blog_linku_'+i+'[]"> &nbsp; Link Name '+i+':  <input type="text" name="blog_linkn_'+i+'[]">&nbsp;<span class="glyphicon glyphicon-minus minus" id="minus'+i+'"></span></p>';
        $('.appending_div').append(field);
        i = i+1;
        $('#minus'+i+'').click(function(){
            $(".link"+i+"").remove();
        });
    });
});

jQuery删除属性不起作用

3 个答案: