AJAX响应未运行放置在外部JS文件中的功能（仅在直接放置在AJAX响应中时运行）

Question

I have a problem with AJAX response not running a simple Jquery function, that is placed in external JS file. The function runs only when I put it's code directly to AJAX response view code.

The page, which displays link for dynamically loaded AJAX request, has embedded JS file in header:

<script type="text/javascript" src="script.js"></script>

In "script.js" file I have two functions: 1. One for loading AJAX response from "/some_url" in "#some_id" element. 2. Second for using in AJAX response - which only alerts "a", when the loaded form is submitted

jQuery(function () { 
  $('.ajax_link').click(function(event) {
    $.ajax({
      type: 'GET',
      url: '/some_url',
      evalScripts: true,
      cache: false,
      dataType: 'html',
      success: function(data){
        if(parseInt(data)!=0 && data!='')   {
          $('#some_id').html(data);
        }
      }
    });
  });
});

jQuery(function () {
  $('.ajax_form').submit(function(event) {
    event.preventDefault();
    alert('a');
  });
});

In the main page (which has "script.js" file embeded in header) I have following code:

<div><a class="ajax_link">Load AJAX in some_id</a></div>
<div id="some_id"></div>

Clicking on the link successfully loads the AJAX response to "some_id" div.

Now, in the AJAX response, I have a simple form:

<form class="ajax_form" method="post" action="/some_other_url">
  <input class="submit" type="submit" value="Send"/>
</form>

Now, if I don't place the piece of script, dedicated to "ajax_form" class, under the form code - it does not work at all. If I place the following code (so basically, I repeat the same function as in "script.js" file)

<script type="text/javascript">
jQuery(function () {
  $('.ajax_form').submit(function(event) {
    event.preventDefault();
    alert('a');
  });
});
</script>

in the AJAX response view (for example, under the ) it works.

Why is that? Isn't AJAX response using the JS files, loaded to the "main" page?

I would be really apriciate for help :)

Answer 1

Guess:

What seems to be happening is when your script.js gets loaded/executed there is no .ajax_form element present in DOM. When you place the code below you form tag it gets executed again and works.

Try updating your script.js with below code:

jQuery(function () {
   $( document ).on( "submit", ".ajax_form", function( event ) {
      event.preventDefault();
       alert('a');
   });
});

Have a look at event delegation .