Question

我有这个功能最初有效但当我更改页面以显示隐藏元素时，该功能不适用于曾经隐藏的那些元素。

jQuery(document).ready(function($) {

$(".paragraph-div").hide();

$(".toggle-div").click(function() 
                     {
 if ($(this).next(".paragraph-div").is(":visible")) {
   $(this).next(".paragraph-div").hide();
   $(this).text("More Info");
 } else {
   $(this).next(".paragraph-div").show();
   $(this).text("Less Info");
 }
});

});

我在这里制作了一个jsfiddle：https://jsfiddle.net/6k0bshb6/44/

所以发生的事情是它只适用于最初在页面加载时可见的.paragraph-div，所以当我显示新的段落div（通过过滤表格或使用我桌子上的显示更多行按钮）时，它们是应该隐藏它们时已经打开，并且点击功能对它们不起作用。

我对jQuery很新，并且不知道这样做的正确方法，但我认为它与("document").ready有关我认为我需要改变它但是我应该将它更改为什么？

如果您希望看到此问题，则需要用户代理切换器和流行的移动用户代理字符串，因为我正在http://mobilereactor.co.uk/shop/mobile-phones/apple-iphone-5s-32gb-space-grey-deals/

在我的网站的移动版本上工作

Answer 1

我找到了这个问题的答案jQuery - How do I bind events to hidden elements that will be shown later?

我不完全理解它 - 但它有效！

我的解决方案;

//toggle details open and close
$('body').on('click','.toggle-div',function() {
  if ($(this).next(".paragraph-div").is(":visible")) {
        $(this).next(".paragraph-div").hide();
        $(this).text("More Info");
  } else {
        $(this).next(".paragraph-div").show();
        $(this).text("Less Info");
 }
});

如何使jQuery函数在隐藏元素可见时使用它们

1 个答案: