JavaScript无法在Ajax调用上运行

Question

I've got a problem with working JS in the Ajax call. The JS works normaly until I get the new data from database or when I get ajax call. Ajax call works normaly, just Javascript does not load. Please help.

Here is the example 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

And here is the 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 

And here is the deleting_data.js, whick works normaly when the page is loaded.

$(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

If you are looking for javascript to fire based on an elemenet created from an AJAX call, you need to remember your order of operations. For example: If you fired a .click event assignemnt at time 0, and then ajax some content at time 4 which produces a type that matches the parameters of the click event, it will not have the .click property assigned. It is because the script to assign the click event was not applied to that element. It would need to be reapplied by calling that .click function again.

Answer 2

live() is depracated since jQuery 1.7 Try to use on() instead, like this :

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

With your code :

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

And for the record, you're including jQuery twice :

<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>