點擊完成與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; 
     });