Question

我的html和javascript在下面。当单击“切换”和“下一步”的输入按钮时，处理程序没有运行，因此没有检测到点击，但我无法弄清楚原因。任何帮助将不胜感激！

感谢。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv:"Content-Type" content="text/html; charset=ISO-8859-1" />
    <script text="text/Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/Javascript" src="jquery.js"> </script>

    <link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>

    <link rel="stylesheet" href="jquery_home.css">

    <title> jquery home </title>


</head>
<body>

<div id="container"> 
    <h1 style="position: relative; top: 10%; width: 300px; margin-left: auto; margin-right: auto"> Learn jQuery </h1>

<div id="q_and_a_container" style="text-align: center">
    <div style="width: 200px; margin-left: auto; margin-right: auto; text-align: center" id="qa"> Nate Hill</div>

    <input type="submit" id="switch" value="See Answer" /> 
    <input type="submit" id="next" value="Next Question" />
</div>

<div id="answer_container">
    <textarea id="answer_here"> </textarea>

</div>

</div>

<div id="another_container" style="width: 300px; margin-left: auto; margin-right: auto; text-align: center">

    <h2 style="font-family: 'Chalk'">
<a href="add_question.html">Add question </a> </h2>

</div>



</body>

</html>

的Javascript

$(document).ready(function() {
    var question_number = 1;
    var tempText;
    var qno;

    $(document).on("click", "#switch", function(event) {

        console.log("clicked");
        if ($("#switch").val() == "See Answer") {
            tempText = $("#qa").text();
            $("#qa").text("");
            qno = "" + question_number;
            qno = "#" + qno;

            $.ajax({
                url: "answers.html",
                datatype: "html",
                success: function(data) {
                    $("#qa").html($(data).filter(qno).text());
                },
                error: function(r) {
                    alert("whoops, error in ajax request");
                }
            }); // end AJAX request

            // change value
            $("#switch").val("See Question");
        } else {

            temptText = $("#qa").text();
            $("#qa").text("");
            qno = "" + question_number;
            qno = "#" + qno;

            $("#qa").text(tempText);            
            $("#switch").val("See Answer");
            }
    });

    $(document).on("click", "#next", function(event) {
        question_number = question_number + 1;
        qno = "" + question_number;
        qno = "#" + qno;

        $.ajax({
            url: "questions.html",
            datatype: "html",
            success: function(data) {
                $("#qa").text($(data).filter(qno).text());
            },
            error: function(r) {
                alert("whoops, error in ajax request for next question");
            }
        }); // end AJAX request
    });

    $("textarea").keydown(function(e) {
    if(e.keyCode === 9) { // tab was pressed
        // get caret position/selection
        var start = this.selectionStart;
        var end = this.selectionEnd;

        var $this = $(this);
        var value = $this.val();

        // set textarea value to: text before caret + tab + text after caret
        $this.val(value.substring(0, start)
                    + "\t"
                    + value.substring(end));

        // put caret at right position again (add one for the tab)
        this.selectionStart = this.selectionEnd = start + 1;

        // prevent the focus lose
        e.preventDefault();
    }
});


})

Answer 1

删除以下任何一个jquery库引用。我认为发生了jquery冲突。

<script text="text/Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/Javascript" src="jquery.js"> </script>

Answer 2

似乎您没有将JS添加到HTML源代码中，您应该添加类似

的内容

    <script type="text/Javascript" src="YOUR_SRC"> </script>

到HTML。

编辑：如果<script type="text/Javascript" src="jquery.js"> </script>是js参考，请确保它有效。

输入类型=提交不在内部div时触发？

2 个答案: