При нажатии не работает два div, вложенных в одну строку - PullRequest
Новая
       15

При нажатии не работает два div, вложенных в одну строку

0 голосов
/ 18 апреля 2019

У меня есть два HTML div, вложенных в один div class="row"; первый содержит три <button>, второй - четыре <p>. Перед добавлением второго div кнопки, включенные в первый div, работали правильно при нажатии; после добавления второго div перестала работать функция кнопки on.click - не изменились идентификаторы кнопок и 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, кнопка снова работает.

...