单击新元素时，Jquery 上一个 .html() 元素仍显示

Question

我必须编写代码来查找所有锚点并附加一个显示元素文本弹出窗口的函数。我的代码可能是一团糟，但我能够让它工作，但我现在遇到的问题是：

如果我单击链接 1，然后单击链接 2，然后再次单击链接 1，它会显示链接 2 的文本，但是如果我再次单击它，它会显示正确的文本。

我不确定如何重写或修复此代码以正确显示被点击的元素，一直是文本。

这是一个 jsfiddle 示例：http://jsfiddle.net/2aLfL/1/

$(document).ready(function() {

function deselect(e) {
  $('.pop').slideFadeToggle(function() {
    e.removeClass('selected');
});    
}

$(function() {
   $('a').click(function(){
     if($(this).hasClass('selected')){
     deselect($(this));

} else {
  $(this).addClass('selected');
  $('.pop').slideFadeToggle();
    var elText = $(this).text();
    $('#elPop').html("<p>" + "<br><br>" + "You just clicked: <br><b>" + elText + "</b><br><br><br>" + "Click anywhere to Close" + "</p>");
    console.log(this);

    $("#closeWin").click(function () {
        $('.anchorpop').hide();
    });
}
return false;
});
});

    $(function close(){
 $(document).click(function(){  
  $('.anchorpop').hide();
  });
});


$.fn.slideFadeToggle = function(easing, callback) {
  return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
});

Answer 1

您正在绑定以下点击处理程序

    $("#closeWin").click(function () {
      $('.anchorpop').hide();
    });

在<a> 点击处理程序内，因此每当点击链接时，都会添加多个处理程序。

使用toggleClass() 方法可以避免很多不必要的代码。

您还可以通过传递额外的选择器将相同的事件处理程序绑定到多个元素。

毕竟你的代码归结为

$(function () {
  $('a').click(function () {
    var htmlString = "<p>" + "<br><br>" + "You just clicked: <br><b>" + $(this).text() + "</b><br><br><br>" + "Click anywhere to Close" + "</p>"
    $('.pop').html(htmlString).slideFadeToggle(function () {
        $(this).toggleClass('selected');
    });
  return false;
  });
  $("#closeWin, .anchorpop").click(function () {
    $('.anchorpop').hide();
  });
});

还有客户slideFadeToggle 函数。

Updated Fiddle