为什么单击第二个项目后，此单击功能不起作用

Why does this click function not work after clicking a second item?

本文关键字：单击 功能 不起作用 第二个 项目 为什么      更新时间：2023-09-26

我在弄清楚为什么我的点击功能不起作用时遇到了一些问题。

我在这里有一个JSFiddle：http://jsfiddle.net/adbakke/ve9oewvh/

我的html像这样分解（压缩后发布在这里）：

<div class="projectDisplay"></div>
<div class="flex-grid project-list">
   <div id="project1" class="project">
      <div class="projectImg"><img></div>
      <div class="projectDesc">
        <h3>title</h3>
        <p>Description</p>
        <span>click to close</span>
      </div>
   </div>

现在，我的JQuery在"项目"下获得了所有HTML，如下所示：

$('.project').click(
   function() {
     var newGet = $(this).html();

然后有一组函数（它们都很好地工作）将这些数据添加到<div class="projectDisplay"></div>中，如果已经有数据，则将其全部替换。

然后，当我想通过点击<span> click to close</span>来关闭项目时，当我点击第一项时，它可以正常工作，但如果我在关闭前点击第二项，它就不起作用了。

编辑：单击一个图像，然后（在点击关闭之前），单击项目列表中的第二个图像，并尝试单击"关闭项目"。

我的关闭函数看起来是这样的：

$('.closeMe').click(
  function() {
    $('.projectDisplay').fadeOut(500);
  }
);

我试着把它放在点击功能本身的范围内外。两者都不允许我在第二次点击打开另一个项目时关闭它。

我错过了什么？

更新：更新了JSFiddle库，这样您就可以判断不同的部分是不同的。

代替：

$('.closeMe').click(

它将为此时DOM中存在的所有.closeMe元素绑定点击事件

用途：

$(document).on('click', .closeMe,

它将click事件绑定到body，然后将其委托给.closeMe，这意味着它将为动态添加的.closeMe元素激发，即使在初始绑定之后也是如此。

即

  $(document).on('click', '.closeMe',
    function() {
      $('.projectDisplay').fadeOut(500);
    }
  );

试试看http://jsfiddle.net/L4Lmf6zy/1/

您应该将点击事件委托给.clickMe，因为您在每次打开项目时都会动态添加按钮。

此处的工作示例http://jsfiddle.net/ve9oewvh/3/

所以你应该使用

$(document).on('click', '.closeMe',
    function() {
      $('.projectDisplay').fadeOut(500);
    }
);

问题是，当您单击另一个项目时，会删除所有子节点，而没有重新绑定单击函数。您需要使用新的HTML重新绑定单击事件。

$(document).ready( function () {
// Hide the Description, Close Button and Link to Site
  $('.projectDesc a, .projectDesc p, .projectDesc span').hide();
// What happens when you click the project button
  $('.project').click(
    function() {
      var newGet = $(this).html();
      if ($('.projectDisplay').is(':empty')) {
      // Add the description section if empty
        $(newGet).hide().appendTo('.projectDisplay').fadeIn(500);
        $('.projectDisplay .projectDesc a, .projectDisplay .projectDesc p, .projectDisplay .projectDesc span').fadeIn(250);
      } else {
      // If description is not empty, fade out, empty and add new project description
        $('.projectDisplay').fadeOut(500, function (){
          $('.projectDisplay').empty().append(newGet).fadeIn(250);
          $('.projectDisplay .projectDesc a, .projectDisplay .projectDesc p, .projectDisplay .projectDesc span').fadeIn(250);
            $('.closeMe').click(
        function() {
          $('.projectDisplay').fadeOut(500);
        }
      );
        })
      };
      $('html, body').animate({
          // scrollTop: $(".projectDisplay").position().top
          scrollTop: $(".projectDisplay").offset().top - 200
      }, 750);
      $('.closeMe').click(
        function() {
          $('.projectDisplay').fadeOut(500);
        }
      );

    });
});
// End of Project Click Function
相关文章：