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函数中可能存在错误。 尝试使用简单的警报语句进行调试。