onclick返回函數未定義

我有一個用於更改用戶密碼的Bootstrap模式。然而，問題在於無論我嘗試什麼，我都無法通過onclick或通過將按鈕附加到使用.on的事件來觸發事件。它根本不會識別它。onclick返回函數未定義

我試過把<script>標籤上面的模態，下面的模態，甚至裏面的模態，只有總是有onclick返回Uncaught ReferenceError: updatePassword is not defined。然後我刪除了onclick，爲提交按鈕分配了一個ID，並嘗試了$('#update-password').on('click', function() { ... });，但這根本沒有被識別。

所有這些的罪魁禍首幾乎可以肯定是Bootstrap模式，我猜這是瀏覽器在頁面加載時處理它的方式。

莫代爾

<!-- Modal --> 
<div class="modal fade" id="changePasswordModal" tabindex="-1" role="dialog" aria-labelledby="changePassModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
       <h4 class="modal-title" id="changePassModalLabel">Change Password</h4> 
      </div> 
      <div class="modal-body"> 
       <div class="col-md-12"> 
        <div class="alert alert-password" style="display: none;"> 
         <p></p> 
        </div> 
       </div> 
       <form role="form" action="#" method="post"> 
        <div class="form-group"> 
         <label for="password-current">Current Password<span>*</span></label> 
         <input type="password" class="form-control" id="password-current" name="pass-curr" placeholder="Current password..."> 
        </div> 
        <hr> 
        <div class="row"> 
         <div class="col-md-6"> 
          <div class="form-group"> 
           <label for="password-new">New Password<span>*</span></label> 
           <input type="password" class="form-control" id="password-new" name="pass-new" placeholder="New password..."> 
          </div> 
         </div> 
         <div class="col-md-6"> 
          <div class="form-group"> 
           <label for="password-new-conf">Confirm New Password<span>*</span></label> 
           <input type="password" class="form-control" id="password-new-conf" name="pass-new-c" placeholder="Confirm new password..."> 
          </div> 
         </div> 
        </div> 
       </form> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
       <button type="button" class="btn btn-primary" onclick="updatePassword()">Update Password</button> 
      </div> 
     </div> 
    </div> 
</div>

腳本

<script> 
    function updatePassword(){ 
     console.log('foo'); 
     /*$.ajax({ 
      url: url+"ajax/update_password", 
      data: {pass-curr : pass-curr, pass-new : pass-new, pass-new-c : pass-new-c}, 
      async: false, 
      success: function(data) { 

      }, 
      error: function(data) { 
       $('#alert-password').removeClass('alert-success').addClass('alert-danger').html('<p><strong>Sorry, an error occurred!</strong></p><p>'+data.additional+'</p>').slideDown(200, function() { 
        $('#alert-password').delay(4000).slideUp(200); 
       }); 
      } 
     })*/ 
    }; 
</script>

我的道歉，如果這已經被問過。我似乎找到的唯一問題是那些要求如何通過onclick啓動模式的問題。

來源

2015-01-10 J Young

做ü包括以下JQuery庫？ – user1428716

@ user1428716是的，它包含在文檔的頭部。我發現至少可以這麼說... –

的問題是，你的事件沒有得到與鍵綁定

請找到JSFIDDLE這裏

在HTML - 做腳本標籤

<head> 
    <script> 

    function updatePassword(){ 

     console.log('updatePassword'); 

    } 

    $(document).ready(function(){ 


     // $('.btn-primary').on('click',function(){ - This too works 
     // console.log('foo');  
     //}); 

     $('.btn-primary').on('click',updatePassword); 


    }); 

</script> 
</head>

來源

2015-01-10 12:11:26 user1428716

我已經接受你的答案，因爲它解決了提供的問題代碼。然而，'.on'處理程序沒有被識別的實際原因是因爲'pass-cur'中的一個變量顯然是非法的。這很有趣，因爲儘管'console.log（'foo'）;'是第一行，'pass-cur = value;'打破了調試它的一個噩夢的整個函數，直到控制檯不輸出任何內容...... ！無論如何，謝謝你的時間。 –

onclick返回函數未定義

回答

相關問題