jquery를 삽입 한 후에 요소에 jquery를 어떻게 첨부 할 수 있습니까?

Question

ajax를 통해 제출하는 양식이 있고 jquery를 통해 제출할 업데이트 된 양식을 포함하는 업데이트 된 HTML 청크를 반환합니다.

내가 겪고있는 문제는 jquery에서 캡처 한 이벤트를 처음 클릭 할 때 잘 작동한다는 것입니다. 새로 고치지 않고 양식을 다시 변경하면 jquery에서 이벤트를 캡처하지 않고 표준 게시물 요청을합니다.

jquery를 삽입 한 후에 요소에 동작을 첨부하려면 어떻게해야합니까?

여기 내 jquery 코드입니다.

$('.edit_clothing_product').submit(function(){ 
    var productDiv = $(this).parent(); 
    var action = $(this).attr('action'); 
    var formData = $(this).serialize(); 

    $.post(action, formData, function(data){ 
    productDiv.replaceWith(data); 
    }); 
    return false; 
}); 

다음은 내가 반품 한 HTML입니다.

<div class="product"> 
    <form action="..." class="edit_clothing_product"> 
     <div class="color_combos"> 
     ...{form fields} 
     </div> 
     <a href=".../add_color_combo" class="add_color_combo">Add Color Combo</a> 
    <input name="commit" type="submit" value="Save" /> 
    </form> 
</div> 

Answer 1

양식을 바꾸기 때문에 정의한 제출 이벤트 핸들러를 다시 연결해야합니다. 이 모든 것을 호출 가능한 함수로 만들 수 있으므로 여러 번 호출 할 수 있습니다. 당신이 live와 click 이벤트 핸들러를 첨부 할 수 있습니다하지만 .submit로 정확한 같은 일이 아니에요 -

는 지금까지 내가 아는 한, live는 submit 작동하지 않습니다. 당신이 게으른 느끼는 경우

function handleForm(el) { 
$(el).submit(function(){ 
    var productDiv = $(el).parent(); 
    var action = $(el).attr('action'); 
    var formData = $(el).serialize(); 

    $.post(action, formData, function(data){ 
     productDiv.replaceWith(data); 
     var form = data.find('form'); 
     handleForm(form); 
    }); 
    return false; 
}); 
} 

handleForm('.edit_clothing_product') 

, 당신의 제출 버튼에 .live('click', function() {});를 부착하지만이없이 제출됩니다 경우가 늘 그것의 단점이 너무 일을 클릭 : 난 그냥과 같이 함수를 정의한다.

$('.edit_clothing_product #submitButton').live('click', function(){ 
    var form = $(this).closest('form'); 
    var productDiv = form.parent(); 
    var action = $(form).attr('action'); 
    var formData = $(form).serialize(); 

    $.post(action, formData, function(data){ 
     productDiv.replaceWith(data); 
    }); 
    return false; 
}); 

liveQuery을 사용할 수도 있지만 실제로 사용한 적이 없습니다.

Answer 2

Meder가 올바른 방향으로 나를 지적했습니다. 감사합니다.

내가 언급 한 것을 잊어 버리는 한 가지 사실은 페이지에 여러 제품 div가 있다는 것이 었습니다. 즉, 각각에 대해 함수를 호출해야한다는 것이 었습니다.

또한 방금 삽입 한 양식에 제출 이벤트를 다시 첨부 할 수 없었지만 모든 제품 양식에 다시 첨부 할 수있었습니다. 그것은 작동하지만, 조금 서투른 것 같아요, 내가 이런 식으로해서는 안되는지 알려주세요.

여기

function handleForm(el) { 
$(el).submit(function(){ 
    var productDiv = $(el).parent(); 
    var action = $(el).attr('action'); 
    var formData = $(el).serialize(); 

    $.post(action, formData, function(data){ 
     productDiv.replaceWith(data) 
     $('.edit_clothing_product').each(function(){ 
     handleForm(this); 
    }); 
    }); 
    return false; 
}); 
} 

$('.edit_clothing_product').each(function(){ 
    handleForm(this); 
});