Блог

Главная - Вопросы по программированию - При нажатии не работает с двумя div, вложенными в одну строку

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

#javascript #jquery #html #splunk

#javascript #jquery #HTML #splunk

Вопрос:

У меня есть два 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, кнопка снова заработает.

Комментарии:

1. Вы включили весь соответствующий код? Перенос вашего кода на скрипку: jsfiddle.net/rg2snycd кажется, работает просто отлично, все кнопки кликабельны

2. Я согласен с @empiric, ваш код, похоже, тоже работает нормально для меня.

3. Для меня тоже.

4. Спасибо, вы, ребята, правы, похоже, он работает на скрипке, однако не работает на среде разработки, над которой я работаю

5. Попробуйте нажать CTRL F5 в вашем браузере, когда у вас открыта среда разработки…

Метки: