0

我有一个 JavaScript 代码，我从使用 .live() 的旧感冒中改编而来，将其更改为 .on()，因为我使用的是 JQuery 1.9.1：

添加新的输入字段可以正常工作。问题是单击“删除”时它没有删除添加的字段。它甚至没有运行事件点击事件，我无法弄清楚原因。

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>
    <a href="#" id="remScnt">Remove</a>
</p>
</div>

JS代码：

$(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size() + 1;

    $('#addScnt').on('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').on('click', function() { 
        alert('remove');
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
    });
});
4

4 回答 4

1

如果它试图为动态生成的内容运行删除函数，请使用以下处理程序：

$(document).on('click', '#addScnt', 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;
});

$(document).on('click', '#remScnt', function() { 
    alert('remove');
        if( i > 2 ) {
                $(this).parents('p').remove();
                i--;
        }
        return false;
});
于 2013-04-23T18:33:52.363 回答
1

事件委托。

并避免使用重复的 ID。

我已将它们改为类。

HTML

<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>
<div id="p_scents">
<p>
    <label for="p_scnts"><input type="text" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
    <a href="#" class="remScnt">Remove</a>
</p>
</div>

JavaScript

$(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size() + 1;

    $('#addScnt').on('click', function() {
            $('<p><label for="p_scnts"><input type="text" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" class="remScnt">Remove</a></p>').appendTo(scntDiv);
            i++;
            return false;
    });

    $('#p_scents').on('click', '.remScnt', function() { 
        alert('remove');
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
    });
});
于 2013-04-23T18:36:44.263 回答
0

.on()尝试使用动态生成的元素进行事件委托

$(document).on('click','#remScnt', function() { 
        alert('remove');
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
});
于 2013-04-23T18:33:42.337 回答
0

问题是selector by id应该只有 1 个具有 1 个 id 的元素

于 2013-04-23T18:56:43.713 回答