附加DOM准备

Question

我有一个按钮<button id="subs1">test</button>和一个div

<div class="subsystem subhide">
  <h3 style="text-align: center; font-size: 30px; font-weight: normal;">Electronics</h3>
  <p>Lorem</p>
</div>

在css文件中，类.subhide定义为

.subhide {
 display: none;
}

和我正在努力工作的jQuery代码是

jQuery('#subs1').on('click', function(){
jQuery('.subsystem').removeClass('subhide');
});

单击按钮时没有任何反应，为什么会这样？

提前致谢！

Answer 1

问题是jQuery('#subs1')找到具有该id的元素并绑定它们。如果元素在绑定时没有id，则不会处理事件。

附加DOM准备

要解决此问题，请使用on document ready包装代码，这样您的代码只有在您的dom（文档）准备好后才会执行。

在文档准备好之前，页面无法安全操作。＆＃34; jQuery为您检测这种准备状态。 $( document ).ready()中包含的代码只有在页面文档对象模型（DOM）准备好执行JavaScript代码后才会运行。

更好的方法

另一方面，如果您的按钮是动态添加的，那么当事件监听器想要绑定时，它就不会存在，因此代码实际上什么都不做。要解决此问题，请将代码更改为以下内容：

jQuery(document.body).on('click', '#subs1', function() {
    jQuery('.subsystem').removeClass('subhide');
});

此事件将附加到DOM树中始终存在的document.body。现在，当单击正文时，无论按钮附加到DOM的时间如何，事件都将传播到#subs1。

工作代码段

这是一个有效的例子：

＆＃13;

$( document ).ready(function() {
  jQuery(document.body).on('click', '#subs1', function() {
    jQuery('.subsystem').removeClass('subhide');
  });

  jQuery(document.body).on('click', '#subs2', function() {
    jQuery('.subsystem').addClass('subhide');
  });
});

＆＃13;

.subhide {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="subs1">Unhide</button>
<button id="subs2">hide</button>
<div class="subsystem subhide">
  <h3 style="text-align: center; font-size: 30px; font-weight: normal;">Electronics</h3>
  <p>Lorem</p>
</div>

＆＃13;

Answer 2

＆＃13;

jQuery('#subs1').on('click', function(){
jQuery('.subsystem').removeClass('subhide');
});


jQuery('#toggle').on('click', function(){
jQuery('.subsystem').toggle('subhide');
});

＆＃13;

.subhide {
 display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="subsystem subhide">
  <h3 style="text-align: center; font-size: 30px; font-weight: normal;">Electronics</h3>
  <p>Lorem</p>
</div> 
<button id="subs1">Button</button>

<button id="toggle">Toggle Button</button>

＆＃13;

您需要在课堂外定义按钮

希望这有帮助！

Answer 3

试一试：

    $( document ).ready(function() {
      $('#subs1').on('click', function(){
          $('body').find('.subhide').removeClass('subhide');
      });
   });

如果您使用chrome，请清除浏览器缓存。

Answer 4

在样式表中，将其更改为：

.subsystem.subhide {
display: none;
}

.subsystem {
display: anything;
}

应该有效

Answer 5

我不确定为什么，但这个片段有效：

jQuery( document ).ready(function() {
 jQuery('#subs1')
  .click(function(){
  jQuery('body').find('.subsystem').addClass('subhide')})
});

jQuery - .removeClass不起作用

5 个答案:

附加DOM准备

更好的方法

工作代码段