Question

我遇到以下HTML / jQuery脚本的问题。

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
    var count = 1;
    $(function(){
        $('#add').click(function(){
            count++;
            $('#container').append(count + '° posto: '+ '<input type="text" id="item_' + count + '" name="items[]" type="text" /><input type="submit" name="del" id="del" value="Elimina" /><br />');
            return false;
        });
        $('#del').click(function(){
            alert('prova');
            return false;
        });
    });
</script>

<form action="<?php $_SERVER['PHP_SELF'] ?>" method="post">
    <span>1° posto:</span><input type="text" id="item_1" name="items[]" maxlength=<?php echo $psw_length[1]; ?> />
    <input type="submit" name="del" id="del" value="Elimina" /><br />
    <div id="container"></div>
    <input type="submit" name="add" id="add" value="Aggiungi" /><br />

    <input type="submit" name="submit" value="Avanti >" />
</form>

如果我点击第一个“Elimina”按钮，会出现警告，但如果我点击第二个，第三个，第四个等，则不会发生任何事情。

有人可以帮帮我吗？谢谢！

Answer 1

由于您的元素是动态添加的，因此您需要使用on处理程序。

注意： 您添加id del的{{1}}不正确。 id对每个元素都应该是唯一的。

要解决此问题，您可以改为使用类：

class="del"

然后将此代码与on处理程序一起用于动态元素：

$('form').on('click', '.del', function(){
      alert('prova');
      return false;
});

Answer 2

一些事情：
id必须唯一 !!!从id选择器更改为name选择器

您需要使用on或delegate之类的委托事件（不推荐live）。

$('#add').click(function(){
            count++;
            $('#container').append(count + '° posto: ' +
               '<input type="text" id="item_' + count + 
               '" name="items[]" type="text" /> ' +
               '<input type="submit" name="del" value="Elimina" /><br />');
               // ===> Not duplicating the del id!!! 
            return false;
        });
$('form').on('click', 'input[name="del"]', function(){ // <== delegate event.
            alert('prova');
            return false;
        });

Answer 3

对动态创建的控件使用jquery on 事件。 不要使用它已经过时了！

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
    var count = 1;
    $(function(){
        $('#add').on('click', function(){
            count++;
            $('#container').append(count + '° posto: '+ '<input type="text" id="item_' + count + '" name="items[]" type="text" /><input type="submit" name="del" id="del" value="Elimina" /><br />');
            return false;
        });
        $('#del').on('click', function(){
            alert('prova');
            return false;
        });
    });
</script>

<form action="<?php $_SERVER['PHP_SELF'] ?>" method="post">
    <span>1° posto:</span><input type="text" id="item_1" name="items[]" maxlength=<?php echo $psw_length[1]; ?> />
    <input type="submit" name="del" id="del" value="Elimina" /><br />
    <div id="container"></div>
    <input type="submit" name="add" id="add" value="Aggiungi" /><br />

    <input type="submit" name="submit" value="Avanti >" />
</form>**strong text**

点击不适用于jQuery

3 个答案: