JQuery script does not run when loaded via AJAX

Question

I have spent some time reading through the jquery documentation and other questions. I cannot for the life of me figure out what I am doing wrong. I have it working when simply put on a page together and load the page. But when I load the code via Ajax it doesn't work. I read through some other people having similar problems, and everyone says to use .live, but that doesn't work for me either. What am I doing wrong?

I am trying to modify the form enctype so it will NOT upload a file if a box is checked.

Here is the form loaded via 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>

I also have this code. Should it go on the originating page or can it go in the content loaded via ajax? And what do I have to do to make it work with the loaded content so when the change_form checkbox is checked, it will update the <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>

UPDATE: Just to be clear, an HTML page is loaded. Then the FORM listed above is loaded via AJAX based on the selection of the user. I have also added the form and the script to the AJAX loaded content so it get's added to the HTML page after the AJAX event is called to load it.

Here is a small explanation with more code http://pastebin.com/GbWkukQu

Answer 1

I am by no means a JQuery expert but I think a way to make this work and keep the script inside the ajax result you need to:

1. Drop the .ready() part and just have the script code inside as is after the end of the form 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. Ensure that the JQuery ajax call is done with a dataType set to html, e.g.:

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

This will tell JQuery to execute all tags in the ajax response.

Alternatively (and probably safer) is to move the script code out of the ajax form html and use $('#change_form').live("click", function () { handle_code }); . This will tell JQuery to monitor any changes in the DOM, so once the form is added to the DOM it will hood up the click event.

Answer 2

If the code setting the click event handler is running on document.ready, but the form doesn't actually exist, that is likely your problem.

Send the script over with the form in your ajax response, with the script at the bottom.