Question

我有5个星级收音机按钮，它们工作正常，我还有一个锚标签，我需要检查是否在重定向之前检查了任何单选按钮。

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

肯定是因为您的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>

[编辑]：

您必须通过调用preventDefault对象（代码段中的event）上的e来阻止链接的默认行为（例如更改网页的网址） isRated回调。

此外，您可以在链接的href中添加#或用a标签替换button标签，这对于Bootstrap按钮来说是更好的做法。

Answer 2

您应该决定使用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>

Onclick Anchor无法正常工作

2 个答案: