Question

我有2页German和English，其中两个页面的表格相似。要使用相同的表，我使用此<script>在两个页面中加载它：

<script>
jQuery(document).ready(function($){
$('#table_en').load('http://birsmatt.ch/wohnungen/ #table');
});
</script>

该表应该通过javascript动画，它可以在德语页面中工作，因为你可以看到用鼠标悬停在表格的行上，但是这个动画在英文页面中不起作用。

我该如何解决？

编辑:(表的动画<script>）

<script>
jQuery(document).ready(function($){
$('.row1').hover(function() {
$('.one').toggle();
});

$('.row2').hover(function() {
  $('.two').toggle();
});

$('.row3').hover(function() {
  $('.tree').toggle();
}); 

$('.row4').hover(function() {
  $('.four').toggle();
}); 

$('.row5').hover(function() {
  $('.five').toggle();
});

$('.row6').hover(function() {
  $('.six').toggle();
});

$('.row7').hover(function() {
  $('.seven').toggle();
});

 $('.row8').hover(function() {
  $('.eight').toggle();
});

 $('.row9').hover(function() {
  $('.nine').toggle();
}); 

$('.row10').hover(function() {
  $('.ten').toggle();
});

$('.row11').hover(function() {
  $('.eleven').toggle();
});

$('.row12').hover(function() {
  $('.twelve').toggle();
}); 

$('.row13').hover(function() {
  $('.thirteen').toggle();
});     

$('.row14').hover(function() {
  $('.quattordici').toggle();
});    

 $('.row15').hover(function() {
  $('.quindici').toggle();
});    

 $('.row16').hover(function() {
 $('.sedici').toggle();
});

 $('.row17').hover(function() {
 $('.diciassette').toggle();
}); 

 $('.row18').hover(function() {
 $('.diciotto').toggle();
});  

 $('.row19').hover(function() {
 $('.diciannove').toggle();
});

 $('.row20').hover(function() {
 $('.venti').toggle();
});

 $('.row21').hover(function() {
 $('.ventuno').toggle();
}); 

$('.row22').hover(function() {
 $('.ventidue').toggle();
});   

$('.row23').hover(function() {
 $('.ventitre').toggle();
}); 

$('.row24').hover(function() {
 $('.ventiquattro').toggle();
});

$('.row25').hover(function() {
 $('.venticinque').toggle();
});

$('.row26').hover(function() {
 $('.ventisei').toggle();
});

$('.row27').hover(function() {
  $('.ventisette').toggle();
}); 

$('.row28').hover(function() {
  $('.ventotto').toggle();
});

$('.row29').hover(function() {
  $('.ventinove').toggle();
});

$('.row30').hover(function() {
  $('.trenta').toggle();
});

$('.row31').hover(function() {
  $('.trentuno').toggle();
});

$('.row32').hover(function() {
  $('.trentadue').toggle();
});

$('.row33').hover(function() {
  $('.trentatre').toggle();
});

$('.row34').hover(function() {
  $('.trentaquattro').toggle();
});

 $('.row35').hover(function() {
  $('.trentacinque').toggle();
}); 

$('.row36').hover(function() {
  $('.trentasei').toggle();
});

$('.row37').hover(function() {
  $('.trentasette').toggle();
});

$('.row38').hover(function() {
  $('.trentotto').toggle();
});

$('.row39').hover(function() {
  $('.trentanove').toggle();
});

$('.row40').hover(function() {
  $('.quaranta').toggle();
});

$('.row41').hover(function() {
  $('.quarantuno').toggle();
});

$('.row42').hover(function() {
  $('.quarantadue').toggle();
});

$('.row43').hover(function() {
  $('.quarantatre').toggle();
});

$('.row44').hover(function() {
  $('.quarantaquattro').toggle();
});

$('.row45').hover(function() {
  $('.quarantacinque').toggle();
});

$('.row46').hover(function() {
  $('.quarantasei').toggle();
});

$('.row47').hover(function() {
  $('.quarantasette').toggle();
});

$('.row48').hover(function() {
  $('.quarantotto').toggle();
});

$('.row49').hover(function() {
  $('.quarantanove').toggle();
});

$('.row50').hover(function() {
  $('.cinquanta').toggle();
});

$('.row51').hover(function() {
  $('.cinquantuno').toggle();
});

$('.row52').hover(function() {
  $('.cinquantadue').toggle();
});

$('.row53').hover(function() {
  $('.hause2_1').toggle();
});

$('.row54').hover(function() {
  $('.hause2_2').toggle();
});

$('.row55').hover(function() {
  $('.hause2_3').toggle();
});

$('.row56').hover(function() {
  $('.hause2_4').toggle();
});

$('.row57').hover(function() {
  $('.hause2_5').toggle();
});

$('.row58').hover(function() {
  $('.hause2_6').toggle();
});

$('.row59').hover(function() {
  $('.hause2_7').toggle();
});

$('.row60').hover(function() {
  $('.hause2_8').toggle();
});

$('.row61').hover(function() {
  $('.hause2_9').toggle();
});

$('.row62').hover(function() {
  $('.hause2_10').toggle();
});

$('.row63').hover(function() {
  $('.hause2_11').toggle();
});

$('.row64').hover(function() {
  $('.hause2_12').toggle();
});

$('.row65').hover(function() {
  $('.hause2_13').toggle();
});

$('.row66').hover(function() {
  $('.hause2_14').toggle();
});

$('.row67').hover(function() {
  $('.hause2_15').toggle();
});

$('.row68').hover(function() {
  $('.hause2_16').toggle();
});

$('.row69').hover(function() {
  $('.hause2_17').toggle();
});

$('.row70').hover(function() {
  $('.hause2_18').toggle();
});

$('.row71').hover(function() {
  $('.hause2_19').toggle();
});

$('.row72').hover(function() {
  $('.hause2_20').toggle();
});

$('.row73').hover(function() {
  $('.hause2_21').toggle();
});

$('.row74').hover(function() {
  $('.hause2_22').toggle();
});

$('.row75').hover(function() {
  $('.hause2_23').toggle();
});

$('.row76').hover(function() {
  $('.hause2_24').toggle();
});

$('.row77').hover(function() {
  $('.hause2_25').toggle();
});

$('.row78').hover(function() {
  $('.hause2_26').toggle();
});

$('.row79').hover(function() {
  $('.hause2_27').toggle();
});

$('.row80').hover(function() {
  $('.hause2_28').toggle();
});

$('.row81').hover(function() {
  $('.hause2_29').toggle();
});

$('.row82').hover(function() {
  $('.hause2_30').toggle();
});        

$('.row83').hover(function() {
  $('.hause2_31').toggle();
});

$('.row84').hover(function() {
  $('.hause2_32').toggle();
}); 

$('.row85').hover(function() {
  $('.hause2_33').toggle();
});

$('.row86').hover(function() {
  $('.hause2_34').toggle();
});

$('.row87').hover(function() {
  $('.hause2_35').toggle();
});

$('.row88').hover(function() {
  $('.hause2_36').toggle();
});

$('.row89').hover(function() {
  $('.hause2_37').toggle();
});

$('.row90').hover(function() {
  $('.hause2_38').toggle();
});

$('.row91').hover(function() {
  $('.hause2_39').toggle();
});

$('.row92').hover(function() {
  $('.hause2_40').toggle();
});

$('.row93').hover(function() {
  $('.hause2_41').toggle();
});

$('.row94').hover(function() {
  $('.hause2_42').toggle();
});

$('.row95').hover(function() {
  $('.hause2_43').toggle();
});

$('.row96').hover(function() {
  $('.hause2_44').toggle();
});

$('.row97').hover(function() {
  $('.hause2_45').toggle();
});        
});
</script>

Answer 1

根据问题中的代码，它不起作用，因为当您尝试挂钩事件以使其动画时，表格不存在。您已运行代码以响应ready，但load调用异步，因此该表格尚未存在。

将各种hover调用移动到命名函数中，并从load回调中调用它。您可能需要更仔细地定位它们以避免在其他表上挂起事件两次（如果其他表使用这些类）。

以下是一个简化示例，使用setTimeout来模拟load的异步性：

＆＃13;
＆＃13;
$(document).ready(function() { function hookEvents(scope) { $(scope).find(".row1").hover( // Just for the purposes of the example; if it were just // styling, we'd use CSS, not JavaScript function() { $(this).addClass("hovering"); }, function() { $(this).removeClass("hovering"); } ); } // Hook the animations up to any existing tables hookEvents(document.body); // Do the "load" setTimeout(function() { // (This is the load callback) $("#table_en").append( '<table><tbody><tr class="row1"><td>Dyanmically added</td></tr></tbody></table>' ); // Hook events on the newly-installed table hookEvents("#table_en"); }, 250); });
＆＃13;
table, td { border-collapse: collapse; border: 1px solid #ddd; padding: 4px; } .hovering { color: green; }
＆＃13;
<div> Existing table unrelated to #table_en: <table> <tbody> <tr class="row1"> <td>Existing table</td> </tr> </tbody> </table> </div> <dvi> table_en: <div id="table_en"></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

......虽然已经说过，但是有一个更简单的解决方案：事件委托。 jQuery的hover实际上只是mouseenter和mouseleave的一种便捷方法，jQuery也会产生泡沫（即使它们不是本地的），但它们是有用的方式。

所以我们可以改变

$('.row1').hover(function() {
    $('.one').toggle();
});

到

$(document.body).on("mouseenter mouseleave", ".row1", function() {
    $('.one').toggle();
});

jQuery将在鼠标进入或离开具有类row1的元素时调用处理程序，即使该代码运行时元素不在页面上，因为处理程序实际上是附加到document.body，而不是.row1，jQuery只为我们过滤了一些内容。

所以这就是这个例子，但更简单：

＆＃13;

$(document).ready(function() {
  
  $(document.body).on("mouseenter mouseleave", ".row1", function() {
    $(this).toggleClass("hovering");
  });
  
  // Do the "load"
  setTimeout(function() {
    $("#table_en").append(
      '<table><tbody><tr class="row1"><td>Dyanmically added</td></tr></tbody></table>'
    );
  }, 250);
});

＆＃13;

table, td {
  border-collapse: collapse;
  border: 1px solid #ddd;
  padding: 4px;
}
.hovering {
  color: green;
}

＆＃13;

<div>
  Existing table unrelated to #table_en:
  <table>
    <tbody>
      <tr class="row1">
        <td>Existing table</td>
      </tr>
    </tbody>
  </table>
</div>
<dvi>
  table_en:
  <div id="table_en"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

旁注：每当你发现自己重复这样的代码时，这可能意味着你可以将它重构为更简单。在这种情况下，有两种方法可以做到（至少）：

您可以在行上为选择器设置data-*属性：

<!-- Instead of row1 -->
<tr class="row" data-animate=".one">...</tr>
<!-- Instead of row2 -->
<tr class="row" data-animate=".two">...</tr>

...然后是一个处理程序：

$(document.body).on("mouseenter mouseleave", ".row", function() {
    var sel = $(this).attr("data-animate");
    $(sel).toggle();
});

如果您不想更改标记，请改为使用查找表：

var animate = {
    row1: ".one",
    row2: ".two",
    // ...
};

...然后是一个处理程序：

// This creates a string like ".row1, .row2, .row3" and so on
var rowSelector = "." + Object.keys(animate).join(", .");
$(document.body).on("mouseenter mouseleave", rowSelector, function() {
    var sel = animate[this.className]; // Assumes the rows don't have other classes
    $(sel).toggle();
});

Answer 2

您的jQuery(document).ready(function($){}未被解雇或被解雇太早。尝试将所有代码包装在函数中，并在确定已加载行时调用它。

现在，如果我在控制台中写道：

 $('.row1').hover(function() {
      $('.one').toggle();
    });

它启动第一行的workig，所以只需确保在加载表后执行此代码。

试试。

jQuery .load（）无法正常工作

2 个答案: