jQuery 点击功能问题

Question

我有一些 nested <div>，我想在其中单击其中一个 nested 时调用一个函数<div>，但是我无法实现它。

这是我的 HTML：

<div class="seat available">

  <div id="2020" class="seat-click"></div>

  <div class="tootltip-text">

    <p>Name : <span id="id31">Subham<span><button>Ok</button></span></span></p>

        <p>Seat No :<span id="13-tooltip-count">111</span></p>

        <p>Team :<span id="id32">Abc</span></p>

  </div>

</div>

这是我的 jQuery ：

$('.seat-click').on('click', function () {

        console.log('Hello');

    });

为了清楚理解，参考https://jsfiddle.net/47s8q2pv/4/

在这里，我希望仅在单击时调用单击函数<div id="2020" class="seat-click"></div>。

如果我将 jQuery 更改为

$('.seat-click').on('click', function () {

            console.log('Hello');

        });

如果我这样做，那么我<div class="tootltip-text">也将调用相同的点击功能，这是我不想要的，因为将来我会在工具提示中有一些按钮和可点击的项目。

有什么解决方法吗？

Answer 1

正如@entiendoNull 所说，您的 seat-click 元素的高度为 0。您可以设置该元素的高度或在 seat 元素上编写点击事件处理程序，而不是使用：&nbsp;&nbsp;&nbsp;&nbsp;$('.seat').on('click',&nbsp;function&nbsp;()&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('Hello'); &nbsp;&nbsp;&nbsp;&nbsp;});

Answer 2

您正在使用的 div 没有显示在浏览器中，因为它<div id="2020" class="seat-click"></div>没有任何宽度或高度。我不明白你在这种情况下想要什么，但如果你想让工具提示出现的按钮能够被点击，也许这适合你<div class="seat available">&nbsp; <div id="2020" class="seat-click">&nbsp; <div class="tootltip-text">&nbsp; &nbsp; <p>Name : <span id="id31">Subham<span><button>Ok</button></span></span></p>&nbsp; &nbsp; &nbsp; &nbsp; <p>Seat No :<span id="13-tooltip-count">111</span></p>&nbsp; &nbsp; &nbsp; &nbsp; <p>Team :<span id="id32">Abc</span></p>&nbsp; </div>&nbsp; </div></div>