jonesとうまく動作しません。

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」ボタンをクリックすると、警告が表示されますが、私は何も起こらないなど、第四、第2、第3をクリックします。

誰かが私を助けてくれますか？ありがとうございました！

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はユニークである必要があります !!!あなたがonまたはdelegate（liveが推奨されません）のようなデリゲートイベントを使用する必要がnameセレクタ

からidセレクタから変更。

$('#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; 
     });