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 핸들러를 사용해야합니다.

참고 : 당신은 같은 id 잘못 del의 추가됩니다. 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; 
     });