Question

我试图在jsfiddle中执行jquery代码。我的jquery代码如下所示

$(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("sfdrijg");
            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>

我的页面看起来像这样

Page designed

点击＆＃34;添加另一个输入框＆＃34;总是有效，而＆＃34;删除＆＃34;根本没有回应。

Answer 1

尝试将代码更改为

$(document).on('click','#remScnt', function() {

参考这是一个很好的答案，了解更多细节。 https://stackoverflow.com/a/8752376/1640577

Answer 2

工作演示：JsFiddle

予。您的代码将创建多个具有相同名称remScnt的ID，这是不正确的。您必须添加该元素的类，如class="remScnt"

ID必须在页面中唯一。如果要描述一组元素，请使用类。

原因： - W3C不会对您的代码进行验证，这意味着您可能会对浏览器的网站兼容性感到头疼。它可以在一个浏览器中正常工作，而在其他浏览器中也可以。

因此，请尝试为元素添加唯一ID。

II 您还必须更改以下代码：

$(document).on('click','.remScnt', function() { /* Code goes here */ });

原因：事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码调用.on（）时的页面上。当你调用$ .on（）时，动态添加的元素就不存在了，所以事件没有被绑定。

试试这段代码：

$(document).on('click','.remScnt', function() { 
    alert("sfdrijg");
        if( i > 2 ) {
                $(this).parents('p').remove();
                i--;
        }
        // you don't need to add return false            
});

Answer 3

您尚未提供“删除”按钮的HTML代码。

无论如何，如果你的删除按钮是你试图删除的

元素的直接子元素，你应该使用.parent（）。它应该工作得很好。而且你不需要退货。

这样：

$('#remScnt').on('click', function() { 
    alert("sfdrijg");
        if( i > 2 ) {
                $(this).parent().remove();
                i--;
        }
});

单击以删除不起作用

3 个答案: