document.ready（）僅運行一個函數，而不是兩個

Question

我試圖在document.ready（）中運行兩個js函數（我正在使用jquery），但僅運行一個。 這是我的代碼：

    $(document).ready(function() {
    show_properties();
    table_events();
 });

這些功能是在同一個js文件中編寫的，但是在網站加載時僅加載show_properties（）。 我在螢火蟲控制台中測試了寫

table_events（）

控制台告訴我“未定義”，但是在此之后，該函數被加載，ajax調用以及該函數中的所有內容開始起作用。

這是為什么？ 如何解決此問題？

謝謝。

這是我要運行的功能：

    function table_events(){
 $.ajaxSetup ({  
         cache: false  
     });  

 var wait = "<img src='../images/loading_red_transparent.gif' alt='loading...' style='display:block;margin-left:auto;margin-right:auto;'/>";    

    $('.apartamentos tr').on('click', function() {
            alert("hola.")
               var id_propiedad = $(this).find(".id_propiedad").html();   
           var nombre_propiedad = $(this).find(".nombre_propiedad").html(); 
       //$('#property_information').hide('slow');

       $("#property_information")
       .html(wait)
       .load('properties_info.php',{'nombre_propiedad':nombre_propiedad,'id_propiedad':id_propiedad});
       //$('#property_information').show('slow');

        }); 


 }


 function show_properties(){
 $.ajaxSetup ({  
         cache: false  
     }); 
 var wait = "<img src='../images/loading_red_transparent.gif' alt='loading...' style='display:block;margin-left:auto;margin-right:auto;'/>";

     $('#busca_propiedades').on('click',function(){

         var user_id = $('#user_list').val();

         /*var data = $.ajax({
              url: "properties_list.php",
              type: 'POST',
              data:{ 'user_id': user_id },
              cache: false,
              async: false
             }).responseText;

         });*/

         $('#lista_aptos')
         .html(wait)
         .load('properties_list.php',{'user_id':user_id});

        //alert(data);
         });

 }

編輯：使用console.log進行一些調試后，我發現此代碼是在網頁加載時未執行的代碼：

$('.apartamentos tr').on('click', function() {
            alert("hola.")
               var id_propiedad = $(this).find(".id_propiedad").html();   
           var nombre_propiedad = $(this).find(".nombre_propiedad").html(); 
       //$('#property_information').hide('slow');

       $("#property_information")
       .html(wait)
       .load('properties_info.php',{'nombre_propiedad':nombre_propiedad,'id_propiedad':id_propiedad});
       //$('#property_information').show('slow');

        }); 

顯然，此function（）是在網頁加載時不運行的函數； 但是當我再次在控制台中寫時

table_events（）

然后，當我單擊表的tr時，將運行此函數中的代碼。

Answer 1

是否在show_properties通過load調用加載了$('.apartamentos tr')元素？

如果是，則問題是由於執行table_events時，tr元素尚未插入#lista_aptos （由於load使用ajax，這是異步的）。

要檢查，請添加

console.log("trs count: ", $('.apartamentos tr').size());

在table_events函數的頂部。

要解決此問題，您應該將table_events作為完成處理程序傳遞給load調用：

$('#lista_aptos')
         .html(wait)
         .load('properties_list.php',{'user_id':user_id}, table_events);

---

舊回應

您說：“ ...此函數加載后，ajax調用...”

請記住，ajax調用是異步的。

如果您在ajax響應處理程序中定義table_events函數，並且還執行某些操作以將其置於引用函數可見的范圍內，則在table_events定義之前可能會嘗試調用table_events。

或者，如Raghavan所說，show_properties拋出了一個錯誤，阻止了table_events的執行。 但是更好的方法是嘗試使用console.log（“ text”）而不是警報進行調試（警報正在阻止，這將使您從異步調用中隱藏問題）

請嘗試在http://jsfiddle.net/上舉一個例子

Answer 2

如果控制台返回“ undefined”，則表示該函數存在，但結果是未定義。

您的函數需要修復，$（document）.ready（）可能很好。

嘗試在table_events()的最后一行調用table_events() ，看看是否show_properties() 。

Answer 3

需要檢查的幾件事：

table_events是否存在於$（document）.ready范圍內？

show_properties是否可能引發錯誤？

對於“警報調試”，這可能是一個很好的情況：

$(document).ready(function() {
    show_properties();
    // You might also put an alert at the very end of show_properties.
    alert('show_properties called; now calling table_events()');
    table_events();
    alert('table_events called; document.ready done');
});

Answer 4

table_events函數中可能存在錯誤。 嘗試使用簡單的警報語句進行調試。