通过 AJAX 加载时 JQuery 脚本不运行

Posted 2023-05-09

【中文标题】通过 AJAX 加载时 JQuery 脚本不运行

【英文标题】：JQuery script does not run when loaded via AJAX

【发布时间】：2011-08-01 16:45:25

【问题描述】：

我花了一些时间阅读 jquery 文档和其他问题。我一生都无法弄清楚我做错了什么。只需将页面放在一起并加载页面，我就可以正常工作。但是当我通过 Ajax 加载代码时它不起作用。我阅读了其他一些有类似问题的人，每个人都说使用.live，但这对我也不起作用。我做错了什么？

我正在尝试修改表单 enctype，以便在选中某个框时不会上传文件。

这是通过 ajax 加载的表单：

<form id="RequestForm" enctype="multipart/form-data" method="post" action="/submit">
Input File: <input name="inputFile" value="" id="inputFile" type="file">
<input name="onDrive" id="change_form" value="1" type="checkbox"> Located on drive
</form>

我也有这个代码。它应该放在原始页面上还是可以放在通过 ajax 加载的内容中？我该怎么做才能使它与加载的内容一起工作，所以当 change_form 复选框被选中时，它会更新<form enctype>？

<script> 
$(document).ready(function()
    $('#change_form').click(function() 
    if($('#change_form').is(":checked"))
        // update the apply button to enabled
        $('form#RequestForm').removeAttr('enctype');
     else 
        $('form#RequestForm').attr('enctype', 'multipart/form-data');   
    
    ); 
); 
</script>

更新：为了清楚起见，加载了一个 html 页面。然后上面列出的 FORM 根据用户的选择通过 AJAX 加载。我还将表单和脚本添加到 AJAX 加载的内容中，以便在调用 AJAX 事件以加载它之后将其添加到 HTML 页面中。

这里有更多代码的小解释http://pastebin.com/GbWkukQu

【问题讨论】：

一件事，只使用#RequestForm 而不是form#RequestForm，不确定这是否会导致您的问题。

是什么让你说使用“.live()”来设置事件处理程序不起作用？它当然应该。

它可能有效。但我无法让它工作。这就是我在这里寻求建议的原因。我已将alert('clicked') 放入点击事件中，因此我可以看到它正在工作并且它不会“提醒”。

你在为$('#change_form').live("click", function() ... );进行实时绑定吗？

是的。我试过了，它仍然没有用。我需要删除$(document).ready(function()吗？

【参考方案1】：

我绝不是 JQuery 专家，但我认为有一种方法可以完成这项工作并将脚本保留在您需要的 ajax 结果中：

删除 .ready() 部分，在 html 表单结束后保留​​脚本代码。

<script type="text/javascript">

    $('#change_form').click(function() 
    if($('#change_form').is(":checked"))
        // update the apply button to enabled
        $('form#RequestForm').removeAttr('enctype');
     else 
        $('form#RequestForm').attr('enctype', 'multipart/form-data');   
    
); 

</script>

确保在将 dataType 设置为 html 的情况下完成 JQuery ajax 调用，例如：

$.ajax( ... dataType: "html"`` ... );`

这将告诉 JQuery 执行 ajax 响应中的所有标签。

或者（可能更安全）是将脚本代码移出 ajax 表单 html 并使用 $('#change_form').live("click", function () handle_code ); 。这将告诉 JQuery 监视 DOM 中的任何更改，因此一旦将表单添加到 DOM 中，它将隐藏 click 事件。

【讨论】：

也试过了。这开始听起来像是更深层次的东西。

【参考方案2】：

如果设置 click 事件处理程序的代码正在 document.ready 上运行，但表单实际上并不存在，这可能是您的问题。

将脚本与 ajax 响应中的表单一起发送过来，脚本位于底部。

【讨论】：

我也试过了。我将表单和脚本放在 AJAX 内容上，以便在加载时将它们放在一起。它没有用。我还需要做些什么吗？

我会在 pastebin 上发布一些内容并更新问题。

【参考方案3】：

您的问题是准备好的文档已被触发。

将包含的脚本修改为：

function addmystuff()

$('#change_form').click(function() 
    if($('#change_form').is(":checked"))
        // update the apply button to enabled
        $('#RequestForm').removeAttr('enctype');
     else 
        $('#RequestForm').attr('enctype', 'multipart/form-data');   
    
    ); 
;
addmystuff();

这会将事件处理程序添加为新内容的一部分。

假设：jQuery 被正确地添加到页面中。 测试是否添加了 jQuery：（在主页中不是 ajax 加载部分）

$(document).ready(function()
  alert("jquery got loaded");
);

【讨论】：

我没有对此进行测试，您可能必须在新的 div 容器之后添加脚本才能正确处理它。确保您也将类型放入

【参考方案4】：

解决方案不是我所期望的。我有点失望，它无法通过 jQuery 解决。我最终直接编写了 javascript。

function changeForm(chkbox) 
    if (chkbox.checked == 1) 
        document.getElementById("RequestForm").removeAttribute("enctype","");
     else 
        document.getElementById("RequestForm").setAttribute("enctype","multipart/form-data");
       

然后在复选框上添加onClick="changeForm(this);"。现在，即使它是通过 Ajax 加载的，对函数的调用也可以正常工作。它改变了形式，一切都很好。

jQuery 坏了吗？还是我只是错过了什么？

【参考方案5】：

我不确定，但我遇到了类似的问题。 我有一个适用于菜单的脚本，然后加载包含新菜单的链接内容。 如果我继续单击第一个菜单，它会继续工作，但相同的脚本似乎不适用于新菜单

我认为这是因为 DOM 发生了变化，而 jQuery 仍在使用旧的 DOM。 因此，在您加载新内容后，请重新加载您的脚本。我还没有解决我自己的问题，因为我想重新加载我的脚本，但又不想推翻一些变量。