Question

我无法弄清楚为什么在首次点击事件后此脚本不会触发。 show（）函数运行正常，但hide（）不起作用。

<script type="text/javascript">
$(document).ready(function() {
    $(".event.hidden").click(function () {
      var div_id = this.id.replace(/But/, 'Div');
      $("#" + div_id).show('slow', 'linear'); 
      $(this).attr("src", "images/but_hide_event.png");
      $(this).removeClass('hidden').addClass('shown');  
    });
    $(".event.shown").click(function () {
      var div_id = this.id.replace(/But/, 'Div');
      $("#" + div_id).hide('slow'); 
      $(this).attr("src", "images/but_event_info.png");
      $(this).removeClass('shown').addClass('hidden');
    });
});
</script>

相关网页位于http://randykrohn.com/schedules.php?Param=all

Answer 1

您需要使用.live()方法。在准备好文档时，您绑定到.event.hidden但它与任何元素都不匹配。运行show函数后，您需要重新运行该选择器。更简单地说，您可以使用.live（）：

描述：将处理程序附加到所有匹配的元素的事件当前选择器，现在和在将来

将其更改为

$(".event.hidden").live('click', function () { ...

如果你想再次使用这个节目，你也会想要这样做......

$(".event.shown").live('click', function () { ...

Answer 2

问题在于，当DOM首次准备好时，您将行为附加到具有类click和event的元素的shown事件。也就是说，一次，在页面加载。但看起来当时没有.event.shown的元素，因为您只是在之后的shown类中交换元素上的第一个click事件与.event.hidden。

您应该重新考虑您的方法 - 或者如果您不能，则需要使用.live()或.delegate()来监视更改并动态附加新行为这些click事件。

jquery show（）/ Hide（）在第一次单击后不会触发

2 个答案: