jquery表单提交在使用加载函数后不起作用

我有一个index.html页面，它使用jquery调用驻留在同一站点内的somepage.php来加载此index.html页面的内容。jquery表单提交在使用加载函数后不起作用

因此，这是预期的页面加载顺序：的index.html - > somepage.php - > submit.php（如果点击提交按钮）

中的index.html只有 “主-DIV”并没有这样的内容。当调用somepage.php时，通过运行php脚本来加载“main-div”内容。 main-div包含一个带有提交按钮的小表格。使用jQuery，我看看提交按钮是否被点击，点击后，调用submit.php脚本。

这是准系统代码：

<!DOCTYPE html> 
<html> 
<head> 
     <script src="js/jquery.js"></script> 
     <script> 
      $('document').ready(function(){    

       $("#main-div").load("http://www.someurl.com/somepage.php"); 

       $('#item-submit').click(function(){ 
        jsURL = $('#input').val(); 
        submit(jsURL); 

       }); 

       function submit(jsURL){ 
        $.get(
         'http://www.someurl.com/submit.php',  
         { item: jsURL }, 
         function(data){ 
          if(data=="success") 
          { 
          $('#submit-status').html(data); 
          } 
          else 
          { 
          $('#submit-status').html(data); 
          } 
         } 
        ); 
       } 


      }); 
     </script> 

</head> 
<body> 

    <div id="main-div"> </div> 

</body> 
</html>

现在的问题： index.html页面加载有正确显示一切（小形式提交按钮，所有其他主要-DIV的内容，一切都显示）。但是，submit按钮不会调用submit.php脚本，这意味着我相信与点击事件相对应的jQuery代码没有被注册。

我对jQuery相当陌生。这是否与我已经“订购”了jQuery .ready（）中的代码有关？在调用函数之前DOM没有准备好，或者可能是jQuery中的.load（）问题？

来源

2013-03-24 kallakafar

哪里是“＃项目提交”关于你的HTML，它是在返回的响应？ – 2013-03-24 12:08:14

http://stackoverflow.com/questions/1200266/submit-a-form-using-jquery可以帮助你 – 2013-03-24 12:08:41

@MohamedAli - 是的，item-submit是从somepage.php脚本返回的响应 – kallakafar 2013-03-24 12:17:18

试试这个：

<script> 
$(document).ready(function(){ 
     $("#main-div").load("http://www.someurl.com/somepage.php",function(){ 
     $("#main-div").on('click', '#item-submit', function(e){ 
      e.preventDefault(); 
      var jsURL = $('#input').attr('value'); 
      submit(jsURL); 
     }); 
     }); 
}); 

function submit(jsURL){ 
        $.ajax({ 
        url:'http://www.someurl.com/submit.php', 
        type :'GET', 
        success: function(data){ 
        $('#submit-status').html(data); 
        } 
        }); 

       } 
</script>

来源

2013-03-24 12:28:00

谢谢。工作。 – kallakafar 2013-03-24 12:49:44

@ kallakafar欢迎您 – 2013-03-24 13:39:41

$(document).ready(function(){    
    $("#main-div").load("http://www.someurl.com/somepage.php"); 

    $("#main-div").on('click', '#item-submit', function(e){ 
      e.preventDefault(); 
      var jsURL = $('#input').val(); 
      submit(jsURL); 
    }); 

    function submit(jsURL){ 
     $.get('http://www.someurl.com/submit.php', {item: jsURL}, function(data){ 
      $('#submit-status').html(data); 
     }); 
    } 
});

不要引用文档
load()是$.ajax一个快捷方式，它是异步，所以#item-submit当您将事件处理程序一点儿也不存在，则需要为委派的事件处理程序。
如果它确实是表单中的提交按钮，请确保您阻止默认操作，以便表单不会被提交。

来源

2013-03-24 12:09:46 adeneo

你可以引用'文件'，没关系。 – 2013-03-24 12:17:28

@MarcelKorpel - 当然，它甚至可以用引号工作，所以Sizzle可能会计算出来，但事实上它确实很重要，因为删除引号会直接引用文档。 – adeneo 2013-03-24 12:19:25

或者使用简写'$（函数（）{那'。 – 2013-03-24 12:20:33

load函数异步工作。当您尝试绑定事件处理程序时，您的代码#item-submit尚未存在。

绑定更迭事件处理程序：

$("#main-div").load("http://www.someurl.com/somepage.php", function() { 
    $('#item-submit').click(function() { 
     jsURL = $('#input').val(); 
     submit(jsURL); 
    }); 
});

来源

2013-03-24 12:11:36

谢谢@marcel korpel！ – kallakafar 2013-03-24 12:51:12

load负荷异步数据，其中由时间意味着时间要分配上提交按钮按钮本身可能尚未在页面上单击处理。为了解决这个问题，你有两种选择：

指定加载成功处理程序。

$("#main-div").load("http://www.someurl.com/somepage.php", function(){ 
    $('#item-submit').click(function(){ 
      jsURL = $('#input').val(); 
      submit(jsURL); 
     }); 
});

使用on，表明单击处理程序应该分配给正在或将要在页面上的元素。

$('#item-submit').on('click', function(){ 
    jsURL = $('#input').val(); 
    submit(jsURL); 
});

来源

2013-03-24 12:13:50 Andrei

由于所有所指出的，负载功能以异步方式工作的话，你的点击处理程序不工作的“未来” DIV。

可以绑定处理程序，以这样的未来元素：

$(document).on('click', '#item-submit', function(event){ 
      jsURL = $('#input').val(); 
      submit(jsURL); 
});

这样你就可以绑定在jQuery的文档准备功能的处理程序。

来源

2013-03-24 12:24:51

所有答复强调了同样的事情。太感谢您@Shuhel艾哈迈德。 – kallakafar 2013-03-24 12:51:42

jquery表单提交在使用加载函数后不起作用

回答

相关问题