JavaScript无法在Ajax调用上运行

Question

我在Ajax调用中使用JS时遇到问题。 JS正常工作，直到我从数据库中获取新数据或收到ajax调用为止。 Ajax调用正常工作，只是不加载Javascript。 请帮忙。

这是index.php示例。

  <!-- library -->
    <script type="text/javascript" src="js/deleting_data.js"></script>
    <link href="css/forme.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
    <script type="text/javascript" src="js/funkcije.js"></script>
     <link rel="stylesheet" type="text/css" href="css/dinamicno_iskanje.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script type="text/javascript" src="js/jquery.ausu-autosuggest.min.js"></script>

 <div id="load" align="center"><img src="images/loading.gif" width="28" height="28" align="absmiddle"/> Loading...</div>
  <div id="seek">//here comes refreshed data, with ajax call
 <table class="content" style="border-collapse: separate; border-spacing: 0px 5px; ">
     <?php  
        while($row=mysql_fetch_array($query))
        {
            //data from database
      </table></div>
  <div id="delete"></div> //ajax call for deleting data

这是refreshed_data.php

  <!-- library -->
    <script type="text/javascript" src="js/deleting_data.js"></script>
    <link href="css/forme.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
    <script type="text/javascript" src="js/funkcije.js"></script>
     <link rel="stylesheet" type="text/css" href="css/dinamicno_iskanje.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script type="text/javascript" src="js/jquery.ausu-autosuggest.min.js"></script>

<div id="load" align="center"><img src="images/loading.gif" width="28" height="28" align="absmiddle"/> Loading...</div>
<table class="content" style="border-collapse: separate; border-spacing: 0px 5px; ">
 <?php  
    while($row=mysql_fetch_array($query)
    {
        //refreshed data
    ?>
      </table>
       <div id="delete"></div>//ajax call for deleting data 

这是deleteing_data.js，在加载页面时，whick正常工作。

$(document).ready(function () {
    //$(".gumb").live("click",function(){
    $('#load').hide();
    $('#brisanje').hide();
});

$(function () {
    //$(".gumb").click(function() {
    $(".gumb").live("click", function () {

        $('#load').fadeIn();
        $('#brisanje').fadeIn();
        $(this).parent().parent().fadeOut(1000, function () {
            $(this).remove();
        });
        $('#load').fadeOut();
        $('#brisanje').fadeOut(1000);

    });
});             

Answer 1

如果您要查找基于AJAX调用创建的elemenet触发的javascript，则需要记住操作顺序。 例如：如果您在时间0触发了.click事件assignemnt，然后在时间4 ajax了某些内容，从而产生了与click事件的参数匹配的类型，则不会分配.click属性。 这是因为分配click事件的脚本未应用于该元素。 需要再次调用该.click函数来重新应用它。

Answer 2

自jQuery 1.7起，就不再使用live（），而是尝试使用on（），如下所示：

$('rootselector').on('click', 'selector', function(){
   ...
});

用你的代码：

$(document).on('click', '.gumb', function() {
// your stuff
})

为了记录，您两次包含jQuery：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>