Ajax調用不起作用？

Question

嗨，我想提交一個形式在bootstrap模態。這種模式將基於href點擊事件打開。這個href標籤將使用Jquery在ajax調用中動態生成。

href標籤的格式如下，稱爲bootstrap模態。

'<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> 

我們根據點擊呼叫模式我使用的JavaScript代碼的下方，在此代碼只我傳遞的數據通過使用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調用函數低於1。

$(document).ready(function(e) { 
    $('input#submit').click(function() { 
     var title = $('#videotitle').val(); 
     var videoid = $('#videoid').val(); 
     var description = $('#videodesc').val(); 
     var channel = $('#channelname').val(); 
     var actors = $('#actors').val(); 
     var directors = $('#directors').val(); 
     var producers = $('#producers').val(); 
     var musicians = $('#musicians').val(); 
     var cast = $('#cast').val(); 
     var yudate = $('#yudate').val(); 
     var orderno = 0; 
     if($("#orderno").is(':checked')) 
     { 
      var orderno = 1; 
     } 
     var hidevideo = 0; 
     if($("#hidevideo").is(':checked')) 
     { 
      var hidevideo = 1; 
     } 
     var postdata = "title="+title+"&videoid="+videoid+"&description="+description+"&channel="+channel+"&actors="+actors+"&directors="+directors+"&producers="+producers+"&musicians="+musicians+"&cast="+cast+"&orderno="+orderno+"&hidevideo="+hidevideo+"&yudate="+yudate; 


     $.ajax({    
      type: 'POST', 
      url: 'addvideo.php', 
      data: "title="+title+"&videoid="+videoid+"&description="+description+"&channel="+channel+"&actors="+actors+"&directors="+directors+"&producers="+producers+"&musicians="+musicians+"&cast="+cast+"&orderno="+orderno+"&hidevideo="+hidevideo+"&yudate="+yudate, 
      datatype:'json', 
      success: function(response) { 
       $("#form-content").modal('hide'); 
       alert(response); 
      },error: function(){ 
       alert("video categorization failed"); 
      } 
     }); 
    }); 
    }); 

現在我的模式加載正常，並且一旦模型加載點擊href標記，值就會顯示在分配的文本框中。但點擊提交後，它重定向到相同的PHP網址，所有參數都添加爲查詢參數，奇怪的是，如果我打開模態第二次，並嘗試提交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

嘗試使用以下測試和AJAX調用

// 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); 
    } 
}); 

你需要下載jQuery的這個workinf代碼。