document.ready() 只运行一个函数而不是两个

Question

我试图在 document.ready() 中运行两个 js 函数（我正在使用 jquery），但只运行一个。这是我的代码：

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

函数写在同一个js文件中，但是网站加载时只加载show_properties()。我在firebug控制台中测试写了

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

        }); 

显然，这个函数（）是网页加载时不运行的函数；但是当我再次在控制台中写入时

table_events()

然后当我点击表格的 tr 时，这个函数内部的代码就会运行。

Answer 1

$('.apartamentos tr') 元素是否通过 load 调用在 show_properties 中加载？

如果是，那么问题是由于在执行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") 而不是 alert 进行调试会更好（alert 是阻塞的，它会隐藏异步调用的问题）

请尝试在http://jsfiddle.net/上做一个例子

Answer 2

如果控制台返回“未定义”，则表示该函数存在，但结果返回未定义。

你的函数需要修复，$(document).ready() 可能没问题。

尝试在show_properties() 的最后一行调用table_events()，看看是否可行。

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