JQuery $('form').serialize() 在 $('div.container').load() 之后不起作用
Posted
技术标签:
【中文标题】JQuery $(\'form\').serialize() 在 $(\'div.container\').load() 之后不起作用【英文标题】：JQuery $('form').serialize() not working after $('div.container').load()JQuery $('form').serialize() 在 $('div.container').load() 之后不起作用 【发布时间】：2019-02-24 10:49:07 【问题描述】：我有一个带有通过 AJAX 调用更新的 div 的页面，如下所示：
<body>
<div id="container">
<div id="newinfo">
<form id="selectform">
Your name:<br>
<input type="text" name="firstname"><br>
</form>
</div>
</div>
<script>
function reload_container()
$('#container').load('url/to/ajax/update');
console.log($('#selectform').serialize());
</script>
</body>
加载响应相同（包括表单 ID），但内容不同。
如果我从 Firefox 的调试控制台运行 reload_container();，但 serialize() 函数为空，但 $('#selectform') 确实已定义。
不过，我需要表单的内容。我不知道为什么 $('#selectform') 选择器在重新加载后会起作用，而 serialize() 却不会。非常感谢任何帮助。
请注意，表单的输入确实包含名称标签。 jQuery serialize not working 不相关。
更新：绑定到容器中元素的事件在 load() 之后也不起作用。例如。 $('#newinfo').click(function()alert('hi!'); 在正文加载脚本中。不过jQuery .live() vs .on() method for adding a click event after loading dynamic html
【问题讨论】：
你想序列化ajax请求的结果吗？你怎么称呼reload_container()？
您可以使用on( events, selector, handler )定义委托事件
是的，我需要序列化，并且 reload_container 由 setInterval 触发
【参考方案1】：
这似乎工作正常。您的 ajax 处理程序可能有问题。希望这个例子对你有所帮助。
还做了一个在输入元素上使用委托input 事件的示例。
如果您需要帮助，请提供您的 ajax 处理程序。
//define delegate event so it triggers after inserting new elements (with ajax) too.
$('#newinfo').on('input', 'input[name=firstname]', function()
console.log($(this).val());
);
//attach the reload_container function to the button for testing purpose
$('#reload').on('click', reload_container);
//This function mimics the result of your ajax request assuming you do something like this. It updates the form with a new form and run the serialize function on it.
function reload_container()
var ajaxResultMimic = '<form id="selectform">Your name:<br><input type="text" name="firstname" value="updated"><br></form>';
$('#newinfo').html(ajaxResultMimic);
console.log($('#selectform').serialize());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button id="reload">reload</button>
<div id="container">
<div id="newinfo">
<form id="selectform">
Your name:<br>
<input type="text" name="firstname"><br>
</form>
</div>
</div>
</body>【讨论】：
你是对的，这确实工作正常。我的问题一定与此无关。谢谢。 @L.A.Rabida 是的，我认为您在 ajax 处理程序中做了一些删除#selectform 元素或删除元素 id 的操作。或者不添加任何输入。【参考方案2】：
您应该在加载完成处理程序中执行您的代码。
$('#container').load('url/to/ajax/update', function()
console.log($('#selectform').serialize());
);
在此处查看示例http://api.jquery.com/load/
【讨论】：
谢谢，我试过了，但是 load 中的 serialize() 给了我相同的结果，serialize() 在成功 load() 后仍然给出一个空结果。此外，我稍后在 get 请求中提交表单时确实需要 serialize()。 在 ajax 处理程序之外使用serialize() 非常好。以上是关于JQuery $('form').serialize() 在 $('div.container').load() 之后不起作用的主要内容，如果未能解决你的问题，请参考以下文章
jquery如何获取form表单（id='form1'）下的所有lable控件？