Question

我有两个HTML div嵌套在一个div class="row"中；第一个包含三个<button>，第二个包含四个<p>。在添加第二个div之前，如果单击，则第一个div中包含的按钮可以正常工作。添加第二个div后，按钮功能on.click停止工作-按钮ID和js均未更改。如果删除第二个div id="stats"，则按钮会打开并开始运行。

我猜在row div中存在类型冲突，但到目前为止找不到。

$('#btn-button-a').on("click", function() {
  console.log("click on button")
  var url = '....';

  window.open(url, '_blank');
});

$('#btn-button-b').on("click", function() {
  console.log("click on button")
  var url = '....';

  window.open(url, '_blank');
});

$('#btn-button-c').on("click", function() {
  console.log("click on button")
  var url = '....';

  window.open(url, '_blank');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div class="row" style="margin-left:0px !important;">
  <div style="float:left; width: 184px; height: 152px; background: #bee0cc; border-radius: 8px; margin-left: 12px; margin-right: 12px;">
    <b>
        <label style="font-size: 18px; color: white; margin-top: 4px; text-align: center;">Title</label>
         <button id="btn-button-a" class="btn btn-primary-custom" style="width: 170px; height: 30px; font-size: 13px; padding-left: 0px !important; margin:6px; text-align: center">
          <span>Button a</span> </button>
         <button id="btn-button-b" class="btn btn-primary-custom" style="width: 170px; height: 30px; font-size: 13px; padding-left: 0px !important; margin:6px ; text-align: center">
          <span>Button b</span> </button>
         <button id="btn-button-c" class="btn btn-primary-custom" style="width: 170px; height: 30px; font-size: 13px; padding-left: 0px !important; margin:6px ; text-align: center">
          <span>Button c </span> </button>
        </b>
  </div>
  <div id="stats" style="float:left; width: 400px; height: 152px; background: #bee0cc; border-radius: 8px; margin-left: 12px; margin-right: 12px;">
    <label style="font-size: 18px; color: white; margin-top: 4px; text-align: center;">report</label>
    <p style="font-size: 13px; color: black; margin: 15px; text-align: left;">Frozen users: <b>$result_a$</b>
    </p>
    <p style="font-size: 13px; color: black; margin: 15px; text-align: left;">Frozen users %: <b>$result_b$</b>
    </p>
    <p class="status-inline" style="font-size: 13px; color: black; margin: 15px; text-align: left;">Status <b>$result_c$</b>
      <!--<span> </span> -->
    </p>
    <p style="font-size: 13px; color: black; margin: 15px; text-align: left;">t_number: <b>-</b>
    </p>
  </div>
</div>

</html>

通过从第二个div中删除 $result_a$ ， $result_b$ ， $result_c$ （它们是Splunk搜索设置的标记），按钮将再次起作用。

单击时无法与嵌套在同一行中的两个div一起使用

0 个答案: