Question

我花了一些时间阅读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页面。然后根据用户的选择通过AJAX加载上面列出的FORM。我还将表单和脚本添加到AJAX加载的内容中，以便在调用AJAX事件加载后将其添加到HTML页面。

以下是更多代码http://pastebin.com/GbWkukQu

的小解释

Answer 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事件。

Answer 2

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

使用ajax响应中的表单发送脚本，脚本位于底部。

Answer 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");
});

Answer 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坏了吗？或者我错过了什么？

Answer 5

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

我认为这是因为DOM改变了，jQuery仍在使用旧的DOM。因此，在加载新内容后，请重新加载脚本。我没有修复自己的问题，因为我想重新加载我的脚本，但没有推翻一些变量。

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

5 个答案: