Question

我有这个表克隆按钮，它应该在4行存在后自动禁用，直到我删除一行并想要添加另一行，但它仍然被禁用。因此，我试图制作一个选择器来重新评估行数并删除禁用的样式（如果它低于4），但是，单击选择器在我的图标上不起作用。

    $(function() {
        var i = 1;
        $("#addP").click( function()
            {
                i++;
                if(i > 4) {
                    $('#addP').css('cursor','not-allowed').css('opacity','0.65');
                    $('#warning').css('visibility', 'visible');
                } else {
                    $('#people').append('<tr><td><select name="title' + i + '"><option value="mr">Mr. </option><option value="mrs">Mrs. </option><option value="miss">Miss. </option></select></td><td><input type="text" name="forename' + i + '" value=""></td><td><input type="text" name="surname' + i + '" value=""></td><td><i class="fa fa-minus-square-o" id="delete' + i + '" onclick="$(this).closest(\'tr\').remove();" style="font-size: 30px;"></i></td></tr>');
                }
            }
        )

    });
    $(function() {
        $("i[id^='delete']").click(function() {
                alert("Test.");
                i = i - 1;
                i++;
                if(i < 4) {
                    $('#addP').removeAttr("style");
                }
            }
        )
    });

因为附加内容非常混乱，我已经格式化了内脏：

    <tr>
    <td><select name="title' + i + '">
            <option value="mr">Mr.</option>
            <option value="mrs">Mrs.</option>
            <option value="miss">Miss.</option>
        </select></td>
    <td><input type="text" name="forename' + i + '" value=""></td>
    <td><input type="text" name="surname' + i + '" value=""></td>
    <td><i class="fa fa-minus-square-o" id="delete' + i + '" onclick="$(this).closest(\'tr\').remove();"
           style="font-size: 30px;"></i></td>
</tr>

添加函数的按钮，直到我按预期方式点击4行，但如果删除了某行，则会继续阻止任何其他条目。感谢您提供的任何帮助，以及您对我的基本（最好）JQuery技能所做的任何修改。

Answer 1

见Yann86的回答。我只是详细说明代码中的错误，以便您更好地理解。

$("i[id^='delete']").click(function() {
        alert("Test.");
        i = i - 1;
        i++;
        if(i < 4) {
            $('#addP').removeAttr("style");
        }
    }
)

您在此处使用的i与添加行时增加的范围不同。然而，你在那里做了一些非常奇怪的操作......首先减少1，然后再增加？实际上什么都不做。

使i全局可能会让您的代码运行。但是，通常建议根据需要将变量设为全局变量。重构代码可以正常工作，即通过将两个函数合并在一起来删除对$(function(){...});的冗余调用。你的变量可以保持现在的状态。

您的代码应如下所示：

$(function(){
    var i = 0;

    $("#addP").click(function(){...});
    $("i[id^='delete']").click(function(){...});
});

点击选择器在我的图标上无效。

点击而不是选择器，这是一个事件。这是.on('click', listener)的快捷方法。你以后会因为认为这将是一个伪CSS选择器而搞得一团糟。让我举个例子：

$(function(){
    var $set = $('.row');
    $('#addP').click(function(){
        console.log($set.length);
    });
    $('<div>').addClass('row').append(document.body);
    console.log($('.row').length);
});

想象一下，您的HTML包含4个带有row类的预定义元素。此代码段会将另一个（空）div与row类添加到文档的末尾，然后将5打印到控制台。单击ID为#addP的元素时，您会看到4已打印到控制台。这是因为$set仅包含运行时与选择器匹配的元素。

同样，这只是为了更好地理解jQuery如何工作而不是最佳解决方案。欢呼声。

Answer 2

试

 $(function() {

    $("#addP").click( function()
        {

            if($('#people tr').length < 4) {

                var i = $('#people tr').length;

                $('#people').append('<tr><td><select name="title' + i + '"><option value="mr">Mr. </option><option value="mrs">Mrs. </option><option value="miss">Miss. </option></select></td><td><input type="text" name="forename' + i + '" value=""></td><td><input type="text" name="surname' + i + '" value=""></td><td><i class="fa fa-minus-square-o" id="delete' + i + '"  style="font-size: 30px;"></i></td></tr>');

                $("#delete"+i).click(function() {
                    alert("Test.");
                        $(this).closest('tr').remove();
                        $('#addP').removeAttr("style");

                })

            } else {
                $('#addP').css('cursor','not-allowed').css('opacity','0.65');
                $('#warning').css('visibility', 'visible');
            }
        }
    )

});

http://jsfiddle.net/MuWRW/

JQuery - 点击选择器无法在<i> </i>上运行

2 个答案: