모달에서 제출하기 전에 옵션을 확인하십시오.

Question

페이지에 양식이 있지만 제출할 항목이 없습니다. colorbox 플러그인을 사용하여 모달 대화 상자를 시작하는 링크가 있습니다. 제출 단추는 실제로 해당 대화 상자에 있습니다. 폼을 제출하기 위해서는 모달이 시작될 때까지 제출 버튼이 DOM에 추가되지 않기 때문에 delegate()를 사용합니다.

양식을 제출하기 전에 체크해야하는 체크 박스를 추가했지만 체크 여부와 상관없이 제출할 수 없으므로 뭔가 빠졌습니다.

여기에 내 코드

JS의

$('#openModal').colorbox({ 
    html: 'some text <input type="checkbox" name="chk" id="chk"><input id="mySubmit" type="button" value="submit form">' 
}); 

$('#mySubmit').click(function() { 

    if ($('#chk').is(':checked')) { 
     $('#myForm').submit(); 
    } else { 
     alert('Must check first...'); 
    } 
}); 

HTML

<div id="openModal">open modal</div> 

</form> 

나는 무엇을 놓치고?

업데이트 : 누락 된 ID가있는 경우 ... dah. 잡기위한 @McMaster에게 감사드립니다. 추가 ID ...

Answer 1

이 경우에 클릭 이벤트를 위임하지 않는 것 같습니다.

이

$('body').delegate('click' ,'#mySubmit' ,function() { 

    if ($('#chk').is(':checked')) { 
     $('#myForm').submit(); 
    } else { 
     alert('Must check first...'); 
    } 
}); 

Answer 2

당신은 동적으로 colorbox에서 사용되는 input 요소를 추가하십시오. name에서 id으로 변경하십시오.

$('#openModal').colorbox({ 
    html: '<input type="checkbox" id="chk" /><input id="mySubmit" type="button" value="...">'; 
}); 

따라서 on을 사용해야합니다.

$('#mySubmit').on("click", function() { 
    if ($('#chk').is(':checked')) { 
     $('#myForm').submit(); 
    } else { 
     alert('Must check first...'); 
    } 
});