Question

我遇到的问题是AJAX响应没有运行一个简单的Jquery函数，它放在外部JS文件中。该函数仅在我将代码直接放入AJAX响应视图代码时运行。

显示动态加载的AJAX请求链接的页面在头文件中嵌入了JS文件：

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

在“script.js”文件中，我有两个功能： 1.一个用于从“#some_id”元素中的“/ some_url”加载AJAX响应。 2.第二个用于AJAX响应 - 在提交加载的表单时仅提醒“a”

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');
  });
});

在主页面（标题中包含“script.js”文件）中，我有以下代码：

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

单击该链接可成功将AJAX响应加载到“some_id”div。

现在，在AJAX响应中，我有一个简单的形式：

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

现在，如果我没有在表单代码下放置专用于“ajax_form”类的脚本 - 它根本不起作用。如果我放置以下代码（基本上，我重复与“script.js”文件中相同的功能）

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

在AJAX响应视图中（例如，在它下面）它可以工作。

为什么？是不是使用JS文件的AJAX响应，加载到“主”页面？

我真的很乐意帮助：）

Answer 1

猜测：

似乎正在发生的事情是当你的script.js被加载/执行时，DOM中没有.ajax_form个元素。当您将代码放在form标记下面时，它会再次执行并且有效。

尝试使用以下代码更新script.js：

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

查看event delegation。

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

1 个答案: