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代码。