Question

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

我已尝试将<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启动模态的问题。

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返回函数未定义

1 个答案: