0

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

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

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

表事件（）

控制台告诉我“未定义”，但之后该函数被加载，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');

        });

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

表事件（）

然后，当我单击表格的 tr 时，此函数内的代码将运行。

4

4 回答 4

1

元素是否与调用一起$('.apartamentos tr')加载？loadshow_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/上做一个例子

于 2013-04-16T15:43:24.783 回答
0

需要检查的几件事：

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');
});
于 2013-04-16T15:27:46.070 回答
0

table_events 函数中可能存在错误。尝试使用简单的警报语句进行调试。

于 2013-04-16T15:30:31.267 回答
0

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

您的功能需要修复， $(document).ready() 可能没问题。

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

于 2013-04-16T15:24:10.337 回答