点击完成与jQuery工作正常

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处理程序。

注：你加入相同del这是不正确的id。对于每个元素，id应该是唯一的。

为了解决它，你可以使用一个类代替：

class="del" 

，然后使用此代码on处理程序动态元素：

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

Answer 2

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

<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** 

Answer 3

夫妇东西：
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; 
     });