onclick returns 函数未定义

Question

我有一个 Bootstrap 模式用于更改用户密码。然而，问题是无论我尝试什么，我都无法触发事件，无论是通过 onclick 还是通过使用 .on 将按钮附加到事件。它根本不会识别它。

我试过将 <script> 标签放在模态上方、模态下方，甚至在模态内部，结果总是 onclick return 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 启动模式的问题。

Answer 1

问题是您的事件没有与按钮绑定

请在此处查找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>

onclick returns 函数未定义

onclick returns function is not defined

javascript

jquery

modal-dialog

twitter-bootstrap