JQUERY - 在已附加点击事件的区域内启用Click事件

Question

上图是<td>。 该语言为日语，如果您单击绿色区域中的某个位置，它将显示语言选项。 英语单词允许懂日语的人去日语。

<td>和单词english有点击事件。 如果你单击英语版本会转到英文版本，但在它发生变化之前你会看到另一个<td>点击事件。

有没有办法在第一次点击事件发生后再次点击该事件。

代码：

 <td id="languages">
    <a id="navLanguages" class="navJoinLinks">
    <?php echo $siteLanguages->languages;?>
    <?php if($_SESSION['language'] != 'english') {echo '<span id="defaultEnglish">English</span>';}?>
 </a></td>

然后<td>和<span>将点击事件绑定到它们。

THX

Answer 1

你必须停止事件传播，因为点击内部元素会导致外部元素也触发它们的事件：

$('#english, #japanese').click(function(event) {
  event.stopPropagation();
});

Answer 2

在stopPropagation点击处理程序中使用defaultEnglish：

$('#defaultEnglish').click(function(ev) {
    ev.stopPropagation();

    /* ...then do whatever... */
});

在此处详细了解：http://api.jquery.com/event.stopPropagation/

  

描述：防止事件冒泡DOM树，   防止任何父处理程序被通知事件。

通常，当您点击某个项目时，它会通过直接向该项目发送点击事件开始。然后到那个项目的父母。等等，一直到树上。这称为“事件冒泡”。这不只是点击，大多数事件都是这样的。 stopPropagation在处理程序附加到的任何元素处停止冒泡。

此外，由于#navLanguages是一个锚标记，因此它具有默认操作（将页面重定向到href值）。由于您手动处理此区域中的点击，您可能不希望允许这样做。要做到这一点，你可以像这样使用preventDefault()：

$('#navLanguages').click(function(ev) {
    ev.preventDefault();

    /* ...then do whatever... */
});