javascript - 如何在事件上创建 DOM 元素，然后阻止事件处理程序触发，直到 DOM 元素存在？

Question

所以基本上我正在创建一个工具提示功能。

工具提示将作为新的 DOM 元素显示在您单击的元素上。

这是 fiddle :

$(document).ready(function () {
    $('.tooltipTarget').click(function () {
        var title = $(this).data('tooltip');

        $('<p class="tooltip active"></p>')
            .text(title)
            .appendTo('body')
            .fadeIn(250);

        var coords = $(this).offset();
        var tooltipHeight = $('.tooltip').height() + $(this).height() + 20;
        var tooltipWidth = $('.tooltip').width() / 2;

        coords.top = coords.top - tooltipHeight;
        coords.left = coords.left - tooltipWidth;

        $('.tooltip').css({
            top: coords.top,
            left: coords.left
        });

    });
});

.tooltip {
    display: none;
    position: absolute;
    border-radius: 1px;
    color: #767676;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    background: #f7f7f7;
    padding: 10px;
    font-size: 12px;
    text-align: left;
    z-index: 10;
    max-width: 250px;
}

<button style="margin: 50px;" data-tooltip="This is a tooltip" class="tooltipTarget">Click me!</button>

但我遇到的问题是，只要触发事件，新的 DOM 元素就会不断出现。

我不会阻止它。我希望它是这样的:

1)您单击按钮

2)出现工具提示

3)再次单击该按钮 - 工具提示消失。

我该怎么做？

工作 fiddle :https://jsfiddle.net/4d8xhLqj/2/

Answer 1

我赞同@JamesSutherland 的观点。工具提示应该预先存在，因此您只需稍后调整它的位置和不透明度即可。

话虽如此，如果您确实需要遵循已有的方法，您可以这样做:

代码片段:

$(document).ready(function() {
  $('.tooltipTarget').click(function() {
    var title = $(this).data('tooltip');
    if (!$('p.tooltip').hasClass('active')) {
      $('<p class="tooltip active"></p>')
        .text(title)
        .appendTo('body')
        .fadeIn(250);
      var coords = $(this).offset();
      var tooltipHeight = $('.tooltip').height() + $(this).height() + 20;
      var tooltipWidth = $('.tooltip').width() / 2;
      coords.top = coords.top - tooltipHeight;
      coords.left = coords.left - tooltipWidth;
      $('.tooltip').css({
        top: coords.top,
        left: coords.left
      });
    } else {
      $('p.tooltip.active').fadeOut(250, function() {
        $(this).remove();
      });
    }
  });
});

.tooltip {
  display: none;
  position: absolute;
  border-radius: 1px;
  color: #767676;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  background: #f7f7f7;
  padding: 10px;
  font-size: 12px;
  text-align: left;
  z-index: 10;
  max-width: 250px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button style="margin: 200px;" data-tooltip="This is a tooltip" class="tooltipTarget">Click me!</button>

这是resulting fiddle 。希望这会有所帮助。