추가 입력 필드를 내가 이것을 사용하려고했다

Question

형성 :

Fiddle

그러나 그가 사용하는 jQuery를 버전은 상당히 오래된 것 같다.

그러나 코드에서 볼 수있는 유일한 필수 업데이트는 .live()을 .on()으로 변경하는 것입니다. 그러나 제거 단추는 내가 변경 한 경우 작동하지 않습니다.

$('#remScnt').on('click', function() { 
      if(i > 2) { 
        $(this).parents('p').remove(); 
        i--; 
      } 
      return false; 
    }); 

누구나 이유가 무엇입니까?

Answer 1

1. ID는
2. 위임은 새로 추가 된 내용에 필요 (이 비록 문제를 일으키는되지 않음) 고유해야합니다.

---

jQuery를

$(function() { 
    var scntDiv = $('.p_scents'); 
    var i = $('.p_scents p').length + 1; 

    $('#addScnt').on('click', function() { 
     $('<p><label for="p_scnts"><input type="text" class="p_scnt" size="20" name="p_scnt_' + i + '" value="" placeholder="Input Value" /></label> <a href="#" class="remScnt">Remove</a></p>').appendTo(scntDiv); 
     i++; 
     return false; 
    }); 

    $('.p_scents').on('click', '.remScnt', function() { 
     if (i > 2) { 
      $(this).parents('p').remove(); 
      i--; 
     } 
     return false; 
    }); 
}); 

HTML

<h2><a href="#" id="addScnt">Add Another Input Box</a></h2> 

<div class="p_scents"> 
    <p> 
     <label for="p_scnts"> 
      <input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /> 
     </label> 
    </p> 
</div> 

이 완벽하게 작동합니다 : 그것은 문자열에서 만든 재 작성, 몇되지 않는 방법, 동적 요소를 필요로 같은 http://jsfiddle.net/uFkPx/

Answer 2

가 보이는 , 모든 부모를 타겟팅(), 같은 ID의 등 :에

$(function() { 
    var scntDiv = $('#p_scents'), 
     i  = $('#p_scents p').length + 1; 

    $('#addScnt').on('click', function (e) { 
     e.preventDefault(); 
     var p = $('<p />'), 
      l = $('<label />', {for: 'inp_'+i}), 
      j = $('<input />', {type: 'text', 
           id: 'inp_'+i, 
           size: 20, 
           name: 'p_scnt_' + i, 
           placeholder: 'Input Value' 
           }), 
      a = $('<a />', {href : '#', 
          id: 'remScnt_' + i, 
          'class' : 'remScnt', 
          text: 'Remove' 
          }); 

     p.append(l.append(j), a).appendTo(scntDiv); 
     i++; 
    }); 

    scntDiv.on('click', '.remScnt', function (e) { 
     e.preventDefault(); 
     if (i > 2) { 
      $(this).closest('p').remove(); 
      i--; 
     } 
    }); 
}); 

FIDDLE