Ajax 호출이 작동하지 않습니까?

Question

안녕하세요 저는 부트 스트랩 모달로 양식을 제출하려고합니다. 이 모달은 href 클릭 이벤트를 기반으로 열립니다. 이 href 태그는 Jquery를 사용하여 ajax 호출에서 동적으로 생성됩니다.

a href 태그의 형식이 부트 스트랩 모달을 호출하기에 부족합니다.

'<a id="addvideo" data-toggle="modal" data-title="'+field.title+'" data-id="'+field.video_id+'" data-desc="'+field.description+'" data-channelname="'+field.channel_name+'" data-yudate="'+field.created_date+'" href="#form-content">'+field.title+'</a>' 

내가 부르고있는 모달은 아래에 나와 있습니다.

   <div id="form-content" class="modal hide fade in" style="display: none;"> 
        <div class="modal-header"> 
         <a class="close" data-dismiss="modal">×</a> 
         <h3>Add Video</h3> 
        </div> 
        <div class="modal-body"> 
         <form name="addvideo" class="form-horizontal" action="#" id="addchannelvideo"> 
          <div class="control-group"> 
           <label class="control-label" for="videotitle">Title</label> 
           <div class="controls"> 
            <input type="text" id="videotitle" name="videotitle"> 
           </div> 
          </div> 
          <div class="control-group"> 
           <label class="control-label" for="videoid">Video ID</label> 
           <div class="controls"> 
            <input type="text" id="videoid" name="videoid"> 
           </div> 
          </div> 
          <div class="control-group"> 
           <label class="control-label" for="videodesc">Description</label> 
           <div class="controls"> 
            <textarea id="videodesc" name="videodesc"></textarea> 
           </div> 
          </div> 
          <div class="control-group"> 
           <label class="control-label" for="channelname">Channel</label> 
           <div class="controls"> 
            <input type="text" id="channelname" name="channelname"> 
           </div> 
          </div> 
          <div class="control-group"> 
           <label class="control-label" for="actors">Actors</label> 
           <div class="controls"> 
            <input type="text" id="actors" name="actors"> 
           </div> 
          </div> 
          <div class="control-group"> 
           <label class="control-label" for="directors">Directors</label> 
           <div class="controls"> 
            <input type="text" id="directors" name="directors"> 
           </div> 
          </div> 
          <div class="control-group"> 
           <label class="control-label" for="producers">Producers</label> 
           <div class="controls"> 
            <input type="text" id="producers" name="producers"> 
           </div> 
          </div> 
          <div class="control-group"> 
           <label class="control-label" for="musicians">Music Directors</label> 
           <div class="controls"> 
            <input type="text" id="musicians" name="musicians"> 
           </div> 
          </div> 
          <div class="control-group"> 
           <label class="control-label" for="cast">Cast</label> 
           <div class="controls"> 
            <input type="text" id="cast" name="cast"> 
           </div> 
          </div> 
          <div class="control-group"> 
           <label class="control-label" for="yudate">Youtube Uploaded Date</label> 
           <div class="controls"> 
            <input type="text" id="yudate" name="yudate"> 
           </div> 
          </div> 
          <div class="control-group"> 
           <label class="control-label" for="cudate">CMS Uploaded Date</label> 
           <div class="controls"> 
            <input type="text" id="cudate" name="cudate"> 
           </div> 
          </div> 
          <div class="control-group"> 
           <div class="controls"> 
            <label class="checkbox"> 
             <input type="checkbox" id="orderno">Priority video 
            </label> 
            <label class="checkbox"> 
             <input type="checkbox" id="hidevideo">Hide in Mobile App 
            </label> 
            <button class="btn btn-success" id="submit"><i class="icon-white icon-ok"></i> Submit</button> 
            <button class="btn btn-inverse"><i class="icon-white icon-circle-arrow-left"></i> Cancel</button> 
           </div> 
          </div> 
         </form> 
        </div> 
       </div> 

지금은 자바 스크립트 코드 아래에 이용하고 있고이 코드 만 나는 아래와 같이 jQuery를 사용하여 모달에서 텍스트 상자의 값을 설정하여 모달 데이터를 전달하고 클릭을 기반으로 모달를 호출합니다.

$(document).on("click", "#addvideo", function() { 
var videoid = $(this).data('id'); 
var videotitle = $(this).data('title'); 
var videodesc = $(this).data('desc'); 
var channelname = $(this).data('channelname'); 
var yudate = $(this).data('yudate'); 

$(".modal-body #videoid").val(videoid); 
$(".modal-body #videotitle").val(videotitle); 
$(".modal-body #videodesc").val(videodesc); 
$(".modal-body #channelname").val(channelname); 
$(".modal-body #yudate").val(yudate); 
    }); 

Ajax 호출 기능이 하나 이하입니다.

이제 모달이 잘로드되고 href 태그를 클릭하여 모달을로드하면 할당 된 텍스트 상자에 값이 표시됩니다. 하지만 제출을 클릭하면 동일한 php url로 리디렉션됩니다. 모든 매개 변수가 쿼리 매개 변수로 추가되고 이상한 것은 모달을 두 번째로 열고 Ajax 호출을 전송하려고 시도하는 것입니다.

Answer 1

$('input#submit').click(function(e) { 
e.preventDefault();// 
.....rest of the code here 
}); 

양식 요소를로드하는 경우 동적으로 다음

$(document).on("click", "#submit", function (e) { 
e.preventDefault(); 
}); 

Answer 2

테스트 및 workinf 코드 AJAX 호출 당신은 이것에 대한 jQuery를로드 할 필요

// Get the form data. This serializes the entire form. pritty easy huh! 
var form = new FormData($('#form_step4')[0]); 
$.ajax({ 
    type: "POST", 
    url: "savedata.php", 
    data: form, 
    cache: false, 
    contentType: false, 
    processData: false, 
    success: function(data){ 
     //alert("---"+data); 
     alert("Settings has been updated successfully."); 
     window.location.reload(true); 
    } 
}); 

에 대한 다음 사용하려고 클릭 위임하려고합니다.