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 元素上编写点击事件处理程序，而不是使用：

    $('.seat').on('click', function () { 
           console.log('Hello');
    });

Answer 2

您正在使用的 div 没有显示在浏览器中，因为它<div id="2020" class="seat-click"></div>没有任何宽度或高度。

我不明白你在这种情况下想要什么，但如果你想让工具提示出现的按钮能够被点击，也许这适合你

<div class="seat available">

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

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

</div>