Onclick Anchor не работает

Question

У меня 5 рейтинга Звезды Radio Buttons, они работают нормально, у меня также есть привязка, и мне нужно проверить, проверена ли какая-либо из переключателей перед перенаправлением.

HTML

<-- index.html --> 

<div class="stars-div"> 
    <div class="stars"> 
     <input class="star-input star-5" id="star-5" type="radio" name="star" value="5"/> 
     <label class="star-icon star-5" for="star-5"></label>         
          <input class="star-input star-4" id="star-4" type="radio" name="star" value="4"/> 
     <label class="star-icon star-4" for="star-4"></label> 
          <input class="star-input star-3" id="star-3" type="radio" name="star" value="3"/> 
     <label class="star-icon star-3" for="star-3"></label> 
          <input class="star-input star-2" id="star-2" type="radio" name="star" value="2"/> 
     <label class="star-icon star-2" for="star-2"></label> 
          <input class="star-input star-1" id="star-1" type="radio" name="star" value="1"/> 
     <label class="star-icon star-1" for="star-1"></label> 
    </div> 
</div> 

<div class="button-div"> 
    <a href="" class="btn btn-default btn-test" id="okB"> 
     <b>OK</b> 
     &nbsp; 
     <span class="glyphicon glyphicon-ok"></span> 
    </a> 
</div> 

Сейчас в моем main.js

$(document).ready(function() { 
    var okButton = document.getElementById('okB'); 
    $("#okB").on("click", isRated); 
    function isRated() { 
    var value = $("input[name=star]:checked").val(); 
    console.log('hola click') 
    } 
}); 

Хорошо, проблема в том, что каждый раз, когда я нажимаю якорь ничего не случится. Что я могу сделать, чтобы ловить рыбу?

Answer 1

Вы должны решить, использовать DOM или JQuery

Вот ссылка, которая не перезагрузите страницу - код может быть введен в голову страницы

$(function() { 
 
    $("#okB").on("click", function(e) { 
 
    e.preventDefault(); // do not (re)load the page in the href 
 
    var value = $("input[name=star]:checked").val(); 
 
    console.log('hola click',value) 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="" class="btn btn-default btn-test" id="okB"> 
 
    <b>OK</b> 
 
    &nbsp; 
 
    <span class="glyphicon glyphicon-ok"></span> 
 
</a> 
 
<div class="stars-div"> 
 
    <div class="stars"> 
 
     <input class="star-input star-5" id="star-5" type="radio" name="star" value="5"/> 
 
     <label class="star-icon star-5" for="star-5"></label>         
 
          <input class="star-input star-4" id="star-4" type="radio" name="star" value="4"/> 
 
     <label class="star-icon star-4" for="star-4"></label> 
 
          <input class="star-input star-3" id="star-3" type="radio" name="star" value="3"/> 
 
     <label class="star-icon star-3" for="star-3"></label> 
 
          <input class="star-input star-2" id="star-2" type="radio" name="star" value="2"/> 
 
     <label class="star-icon star-2" for="star-2"></label> 
 
          <input class="star-input star-1" id="star-1" type="radio" name="star" value="1"/> 
 
     <label class="star-icon star-1" for="star-1"></label> 
 
    </div> 
 
</div>

Answer 2

Это, безусловно, потому, что ваш код javascript находится выше HTML на вашей странице.

Итак, когда ваш браузер читает ваш Js-код, ссылка еще не указана в DOM, поэтому он может привязывать обработчик события к ссылке.

Вот рабочий пример, когда обработчик события связан, когда document готов.

$(document).ready(function() { 
 
    $("#okB").on("click", isRated); 
 
}); 
 

 

 
function isRated (e) { 
 
    e.preventDefault(); 
 
    var value = $("input[name=star]:checked").val(); 
 
    console.log('hola click') 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="" class="btn btn-default btn-test" id="okB"> 
 
    <b>OK</b> 
 
    &nbsp; 
 
    <span class="glyphicon glyphicon-ok"></span> 
 
</a>

[EDIT]:

Вы должны предотвратить поведение по умолчанию ссылки (например, меняет адрес страницы), вызвав preventDefault на event объекта (e в фрагмент), переданный в обратный вызов isRated.

Кроме того, вы можете поставить # в HREF ссылки или замене вы a вкладки с помощью button тега, который является лучшей практикой для кнопок Bootstrap.