Конфликт скрипта с bootstrap.min.js

214

10 марта 2018, 21:24

Есть конфликт приведенного внизу кода скрипта с частью кода из bootstrap.min.js

Скрипт копирует value и цену из input в <p class="item_price"></p>. Он не работает если в строке <div class="btn-group-vertical" data-toggle="buttons"> присутствует data-toggle="buttons". Если атрибут удалить - начинает работать. Попробуйте. Но тогда отвалится другая функция - выделения активного label-а класом active. Она работает через bootstrap.min.js.

Как изменить скрипт чтобы они работали без конфликта?

<link href="https://amberroom.rv.ua/wp-content/themes/amberroombs/css/bootstrap.min.css" rel="stylesheet"/> 
<link href="https://amberroom.rv.ua/wp-content/themes/amberroombs/style.css" rel="stylesheet"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
 
<div class="row price-and-ctaform"> 
	<div class="col-sm-12"> 
		<p class="item_price" style="color:white;text-align:center">0.00</p><p class="item_Size" style="color:white;text-align:center">?</p> 
		<div class="price"> 
			<div class="btn-group-vertical" data-toggle="buttons"> 
			  <label class="btn btn-price"> 
				20 на 20 см — <input type="radio" name="entry.2145715766" id="entry_2145715766" value="20×20"> 450 грн. 
			  </label> 
			  <label class="btn btn-price active"> 
				30 на 30 см — <input type="radio" name="entry.2145715766" id="entry_2145715766" checked value="30×30"> 910 грн. 
			  </label> 
			  <label class="btn btn-price"> 
				40 на 40 см — <input type="radio" name="entry.2145715766" id="entry_2145715766" value="40×40"> 1335 грн. 
			  </label> 
			  <label class="btn btn-price"> 
				50 на 50 см — <input type="radio" name="entry.2145715766" id="entry_2145715766" value="50×50"> 1800 грн. 
			  </label> 
			  <label class="btn btn-price"> 
				60 на 60 см — <input type="radio" name="entry.2145715766" id="entry_2145715766" value="60×60"> 2250 грн. 
			  </label> 
			  <label class="btn btn-price"> 
				80 на 80 см — <input type="radio" name="entry.2145715766" id="entry_2145715766" value="80×80"> 4000 грн. 
			  </label> 
			  <label class="btn btn-price"> 
				100 на 100 см — <input type="radio"name="entry.2145715766" id="entry_2145715766" value="100×100"> 6300 грн. 
			  </label> 
			  <label class="btn btn-price"> 
				<input type="radio" name="entry.2145715766" id="entry_2145715766" value="свій розмір"> свій розмір 
			  </label> 
			</div> 
		</div> 
	</div> 
</div> 
 
<script async='async' src="https://amberroom.rv.ua/wp-content/themes/amberroombs/js/bootstrap.min.js"></script> 
 
<script> 
document.querySelectorAll('input[name="entry.2145715766"]').forEach(el=>el.onclick=e=>{ 
   document.querySelector('.item_price').textContent = e.target.nextSibling.textContent; 
   document.querySelector('.item_Size').textContent = el.value; 
}); 
</script>

Answer 1

Проблема заключается в том, click на самом деле срабатывает на label, а не на input. В плагине для bootstrap для него вызывается .preventDefault() и до инпута click не доходит.

Однако, вызывается событие change, если кнопка стала отмечена, именно на него и можно подписаться.

document.querySelectorAll('input[name="entry.2145715766"]').forEach(el => el.onchange = e => { 
  document.querySelector('.item_price').textContent = e.target.nextSibling.textContent; 
  document.querySelector('.item_Size').textContent = el.value; 
});

<link href="https://amberroom.rv.ua/wp-content/themes/amberroombs/css/bootstrap.min.css" rel="stylesheet" /> 
<link href="https://amberroom.rv.ua/wp-content/themes/amberroombs/style.css" rel="stylesheet" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
 
<div class="row price-and-ctaform"> 
  <div class="col-sm-12"> 
    <p class="item_price" style="color:white;text-align:center">0.00</p> 
    <p class="item_Size" style="color:white;text-align:center">?</p> 
    <div class="price"> 
      <div class="btn-group-vertical" data-toggle="buttons"> 
        <label class="btn btn-price"> 
				20 на 20 см — <input type="radio" name="entry.2145715766" id="entry_2145715766" value="20×20"> 450 грн. 
			  </label> 
        <label class="btn btn-price active"> 
				30 на 30 см — <input type="radio" name="entry.2145715766" id="entry_2145715766" checked value="30×30"> 910 грн. 
			  </label> 
        <label class="btn btn-price"> 
				40 на 40 см — <input type="radio" name="entry.2145715766" id="entry_2145715766" value="40×40"> 1335 грн. 
			  </label> 
        <label class="btn btn-price"> 
				50 на 50 см — <input type="radio" name="entry.2145715766" id="entry_2145715766" value="50×50"> 1800 грн. 
			  </label> 
        <label class="btn btn-price"> 
				60 на 60 см — <input type="radio" name="entry.2145715766" id="entry_2145715766" value="60×60"> 2250 грн. 
			  </label> 
        <label class="btn btn-price"> 
				80 на 80 см — <input type="radio" name="entry.2145715766" id="entry_2145715766" value="80×80"> 4000 грн. 
			  </label> 
        <label class="btn btn-price"> 
				100 на 100 см — <input type="radio"name="entry.2145715766" id="entry_2145715766" value="100×100"> 6300 грн. 
			  </label> 
        <label class="btn btn-price"> 
				<input type="radio" name="entry.2145715766" id="entry_2145715766" value="свій розмір"> свій розмір 
			  </label> 
      </div> 
    </div> 
  </div> 
</div> 
 
<script async='async' src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>