Question

我正在尝试制作一个按钮，当我按下它时 - >它添加了另一个输入按钮。还有一个按钮，当我按下时 - ＆gt;它将删除该行。

这是我现在的代码：

javascript代码：

$(function() {

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

        $('#addScnt').on('click', function() {
            $('<p><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'"  placeholder="הכנס מספר טלפון" /> <a href="#" id="remScnt"><img src="images/deleteSmaller.PNG"></a>').appendTo(scntDiv);
            i++;
            return false;
        });


        $('#remScnt').on('click', function() { 
            if( i > 2 ) {
                $(this).parents('p').remove();
                i--;
            }
            return false;
        });

});

HTML \ PHP代码：

<table>
            <tr>
                <td>phone: <a href="#" id="addScnt"><img class="smallImages1" src="images/add.png"/></img></a></td><td><label for="p_scnts"><input type="text" name="phone" id="phone" value="<?php if (isset($phone[0])) echo $phone[0]; ?>" placeholder="insert phone" required/></label></td>

            </tr>
            <tr>

            <td></td><td id="p_scents">

                <p>

                </p>

            </td>
            </tr>
</table>

当我按下“添加”按钮时，它会工作并显示另一个输入..但是当我按下删除按钮时......没有发生。我的代码中的问题在哪里？我需要修理什么？

Answer 1

尝试事件委派

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

而不是

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

同样是一个建议，它的最佳做法是避免在页面中出现多次的元素的id，因为id应该是唯一的。在您的情况下，由于您可以添加多个文本输入，因此所有删除按钮都具有相同的ID。您可以改为使用类，并可以相应地更改代码。

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

在javascript中删除文本输入

1 个答案: