jquery沒有按鈕點擊

我發送一個ajax請求到我的服務器使用jquery。但是我的代碼沒有感覺到按鈕點擊。我的代碼似乎很好。我不知道我哪裏錯了。我正在使用Django模板引擎。我在腳本塊中包含了jquery 腳本。爲了檢查我的按鈕點擊是否被感知，我在按鈕單擊事件處理程序中使用了一個警報。但我沒有得到警報信息。jquery沒有按鈕點擊

我的代碼：

{% extends 'base.html' %} 

{% block script %} 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
{% endblock script %} 

{% block content %} 
    <div class="row" style="padding-left: 2%;padding-top:1%;"> 
     <div class="col-md-9"> 
      <h2>BookMyHotel</h2> 
     </div> 

     {% if name %} 
      <div class="col-md-3"> 
       <a href="{% url 'admin' %}" > {{ name }}</a> | 
       <a href="{% url 'office_logout' %}" class="btn btn-primary" >Log out</a><br/><br/> 
      </div> 
     {% endif %} 

    </div> 
    <div class="container" style="margin-left: 4%"> 
     <form class="form-group" name="form1" id="form1" method="post" style="padding-top: 1%" action = "{% url 'update_employee' %}"> 
      {% csrf_token %} 
      <h3>Update employee</h3> 
      {% if message %} 
       <b id="message" style="color: red">{{ message }}</b> 
      {% endif %} 
      <br/> 
      <div class="form-group row"> 
       <label class="control-label col-sm-2">Hotel id</label> 
       <label id="hotel_id" class="control-label">bmh-{{ hotel_id }}</label> 
      </div> 
      <div class="form-group row"> 
       <label class="control-label col-sm-2">Hotel name</label> 
       <label id="hotel_name" class="control-label">{{ hotel_name }}</label> 
      </div> 
      <div class="form-group row"> 
       <label class="control-label col-sm-2">Employee ID</label> 
       <input class="form-control col-sm-2" type="text" id="employee_id" name = "employee_id" placeholder = "Employee ID" required="true" > 
       <input type = "button" id="check" value = "Check" class="btn btn-primary"> 

      </div> 

      <div class="form-group row"> 
       <label class="control-label col-sm-2">Designation</label> 
       <input class="form-control col-sm-2" type="text" id="designation" name = "designation" placeholder = "Designation" required="true" > 
      </div> 
      <div class="form-group row"> 
       <label class="control-label col-sm-2">Experience</label> 
       <input class="form-control col-sm-2" type="text" id="experience" name = "experience" placeholder = "Experience" required="true" > 
      </div> 
      <input type = "submit" value = "Create" class="btn btn-primary"> 
     </form> 

    </div> 


    <script> 
     $(document).ready(function() { 
      $('#check').on('click', function() { 
        alert('hi'); 
        var id = $('#employee_id').val(); 
        alert(id); 
        var data = {'employee_id': id}; 
        $.ajax({ 

         url: {% url 'update_employee' %}, 
         contentType: "application/json", 
         dataType: "json", 
         data: data, 
         success: function (data) { 
          if(data.msg == 'success'){ 
           $('#update_sec').show(); 


           $('#designation').val(data.designation); 
           $('#experience').val(data.experience); 


          } 
          else{ 

           $('#message').text("Employee does not exist."); 
          } 
         } 

        }); 
       }); 
     }); 
    </script> 

{% endblock content %}

來源

2017-09-04 Gautham

在瀏覽器控制檯的任何錯誤？ –

你確定jquery被應用嗎？嘗試使用console.log（'Hello World！'）並查看當您單擊該按鈕時是否在瀏覽器控制檯中打印它。我問的原因是因爲我不知道這兩個街區通向哪裏。爲了確保你可以把腳本的src部分放在base.html的頭部。 – DisneylandSC

您還可以使用「點擊」。

<input type = "button" id="check" value = "Check" class="btn btn-primary" onclick="myfunction()">

和

<script> 
     function myfunction() { 
        alert('hi'); 
        var id = $('#employee_id').val(); 
        alert(id); 
        var data = {'employee_id': id}; 
        $.ajax({ 

         url: {% url 'update_employee' %}, 
         contentType: "application/json", 
         dataType: "json", 
         data: data, 
         success: function (data) { 
          if(data.msg == 'success'){ 
           $('#update_sec').show(); 


           $('#designation').val(data.designation); 
           $('#experience').val(data.experience); 


          } 
          else{ 

           $('#message').text("Employee does not exist."); 
          } 
         } 

        }); 
       } 
    </script>

來源

2017-09-04 19:45:45

jquery沒有按鈕點擊

回答

相關問題