我是一个用于更改用户密码的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">×</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启动模态的问题。
答案 0 :(得分: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>