jQuery 상위 필드 집합 제거

Question

동일한 필드 집합의 인스턴스가 여러 개인 양식이 있습니다. "필드 추가"를 클릭하여 더 많은 필드 세트를 추가 할 수 있습니다.

페이지는 5 개의 필드 세트로 시작됩니다. "제거"를 클릭하면 배경색이 빨간색으로 바뀌므로 (어떤 필드 세트가 제거 될지 알려줄 수 있습니다).

필드를 더 추가하면 해당 필드 세트는 페이지가 시작되는 코드와 완전히 동일한 코드를 가지고 있지만 "제거"버튼에 응답하지 않으며 동일한 양식에 추가됩니다.

제 코드를 살펴보고 추가 된 필드가 제거되지 않는 이유를 알려주십시오. 페이지에서 시작하는 필드가 제거되는 이유는 무엇입니까?

https://jsfiddle.net/Lc510xmn/1/

// Adds a new field set to the form 

$('[data-action="addField"]').click(function(){ 
     var fieldSet = '<fieldset><input type="text" name="field"><button type="button" data-action="removeField">Remove</button></fieldset>'; 
     $('form').append(fieldSet); 
    return false; 
}); 

// Changes the background to red instead of removing 

$('[data-action="removeField"]').click(function(){ 
    $(this).parents('fieldset').css('background-color','red'); 
return false; 
}); 

Answer 1

을 시도 동적으로 조작되지 않습니다 최초의 부모 (jQuery 또는 JavaScript 사용). jQuery documentation에서

:

// jQuery 1.4.3+ 
$(elements).delegate(selector, events, data, handler); 
// jQuery 1.7+ 
$(elements).on(events, selector, data, handler); 

또한 당신은 Event binding on dynamically created elements을 읽을 수 있습니다.

---

그래서 당신은 다음과 같이 코드를 변경해야합니다

// jQuery 1.7+ 
$('form').on('click', '[data-action="removeField"]', function() { 
    $(this).parents('fieldset').css('background-color', 'red'); 
    return false; 
}); 

Answer 2

는 이벤트를 위임 할 필요가 있으므로, 바운드 이벤트가 동적으로 추가/생성 요소가 작동하지 않습니다이 $(this).parents('fieldset').remove()

Answer 3

JS 업데이트 바이올린 여기 https://jsfiddle.net/Lc510xmn/2/

입니다

$(function(){ 

    $('[data-action="addField"]').click(function(){ 
      var fieldSet = '<fieldset><input type="text" name="field"><button type="button" data-action="removeField">Remove</button></fieldset>'; 
      $('form').append(fieldSet); 
     return false; 
    }); 

    $("#fields").on("click", '[data-action="removeField"]', function(event){ 
     $(this).parents('fieldset').css('background-color','red'); 
    return false; 
    }); 

});