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

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 结果中:

1. 删除 .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>

2. 确保 JQuery ajax 调用是通过 dataType 完成的。设置为html ，例如:

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

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

另一种选择(可能更安全)是将脚本代码移出ajax形式的html并使用$('#change_form').live("click", function () { handle_code }); 。这将告诉 JQuery 监视 DOM 中的任何更改，因此一旦将表单添加到 DOM，它将屏蔽单击事件。