jquery - Ajax 表单不起作用

Question

不知何故，我的表格不起作用。有谁知道为什么？似乎 ajax 根本没有启动，因为启动的操作是 data.php 而不是 data_ajax.php，我应该看看 ajax 是否正常工作。

编辑

将 HTML 更改为实际的样子，尽管结果应该相同。

HTML

<div id="hidden_slidersize"></div>
<script type="text/javascript">
$(function(){
if ($('body').width() >= 960) {
var sizeOfSlider = 500;
} else {
var sizeOfSlider = ($('body').width())/2;
}
$('#hidden_slidersize').html('<form id="dataform" method="post" name="hiddentrick_form" action="data.php"><fieldset><input id="hiddentrick" name="hiddentrick" type="hidden" value="' + sizeOfSlider + '" /><input class="datasubmit" type="submit" value="senddata" /></fieldset></form>');
});
</script> 

脚本

$(document).ready(function() {

var form = $('form#dataform');

      form.submit(function () { 

    $.ajax({  
      type: 'POST',  
      url: 'data_ajax.php',  
      data: form.serialize(),
      dataType:'html',  
      success: function(data) {alert('yes');},
      error: function(data) {
      //AJAX request not completed
      alert('no');
      }
    });  
    return false;  

      });
}); 

Answer 1

您需要使用.on()方法，因为您的内容是动态加载的。

$(document).ready(function() {

$(document).on('submit', 'form#dataform', function () { 

    $.ajax({  
      type: 'POST',  
      url: 'data_ajax.php',  
      data: form.serialize(),
      dataType:'html',  
      success: function(data) {alert('yes');},
      error: function(data) {
      //AJAX request not completed
      alert('no');
      }
    });  
    return false;  

      });
});