為什么沒有出現警報消息？

Question

我有以下HTML代碼：

<form name="question_issue_form" id="question_issue_form" action="question_issue.php">
      <table class="trnsction_details" width="100%" cellpadding="5">
        <tbody>    
          <tr>
            <td></td>
            <td>
              <input type="checkbox" name = "que_issue[]" value = "Question is wrong" id ="chkQueWrong">Question is wrong</input>
            </td>
          </tr>
          <tr>
            <td></td>
            <td><input type="checkbox" name = "que_issue[]" value = "Answers are wrong" id ="chkAnsWrong">Answers are wrong</input></td> 
          </tr>
          <tr>
            <td></td>
            <td><input type="checkbox" name = "que_issue[]" value = "Question direction is incorrect" id ="chkDirIncorrect">Question direction is incorrecct</input></td>                
          </tr>
          <tr>
            <td></td>
            <td><input type="checkbox" name = "que_issue[]" value = "Other" id ="chkOther">Other</input></td>          
          </tr>
          <tr>
            <td></td>
            <td class="set_message" style="display:none;"><textarea name="que_issue_comment" rows="4" cols="25" maxlength="100"></textarea></td>      
          </tr>
          <tr>
            <td></td>
            <td><input type="submit" name="submit" value="Submit" id="report_question_issue"></td>
          </tr>
        </tbody>
      </table>
    </form>

以下是我的JS代碼：

$(document).on('click', '#report_question_issue', function (e) {
    alert("Jumbo man");
}

在單擊“提交”按鈕后，我將調用警報，但它沒有出現。 我不明白為什么會這樣嗎？ 為了您的方便，以下是js小提琴的鏈接； http://jsfiddle.net/TjK2N/

Answer 1

您不包括JQuery參考。 而且您缺少關閉);

演示

Answer 2

最后，您的代碼支架未正確關閉。 這是必需的“）”， 請參閱此更新的小提琴

$(document).on('click', '#report_question_issue', function (e) {
    alert("Jumbo man");
});

Answer 3

$(document).on('click', '#report_question_issue', function (e) {
    alert("Jumbo man");
}

$（XXX）這是一種jQuery語法，但是我看到您在Pure JS環境中。 您應該使用js庫嗎？

Answer 4

問題在於<form>的submit操作，該操作在調用JS之前重新加載頁面。
為避免這種情況，可以通過以下方法之一進行更改：

1使用JS到action屬性

<form name="question_issue_form" id="question_issue_form" action="javascript:alert('test')">

第二次使用onsubmit屬性

<form name="question_issue_form" id="question_issue_form" onsubmit="alert('test');" action="question_issue.php">

第三在submit事件上使用jQuery

$('form#question_issue_form').submit(function() {
    alert('test');
    return false; //to avoid the reload
});

第4次在提交按鈕上的click事件上使用jQuery

$('form#question_issue_form').click(function() {
    alert('test');
    return false; //to avoid the reload
});