Question

我有一些问题要弄清楚我的点击功能为什么不起作用。

我在这里有一个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获得了＃34;项目＆＃34;下的所有HTML。像这样：

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

然后有一系列功能（一切都运行得很漂亮）将这些数据添加到<div class="projectDisplay"></div>，如果那里已经存在某些内容，则将其全部替换。

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

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

我的近距离功能如下：

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

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

我错过了什么？

更新：更新了JSFiddle基础，以便您可以分辨出不同的部分。

Answer 1

而不是：

$('.closeMe').click(

这将绑定当时DOM中存在的所有.closeMe元素的click事件

使用：

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

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

即

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

在http://jsfiddle.net/L4Lmf6zy/1/

尝试

Answer 2

您应该在.clickMe上委派click事件，因为您是在项目的每个空缺时动态添加按钮。

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

所以你应该使用

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

Answer 3

问题是当您单击另一个项目并且没有重新绑定单击功能时，您正在删除所有子节点。您需要使用新HTML重新绑定click事件。

$(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

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

3 个答案: