[英]onclick=“confirm()” cancel button not working
我在該網格中具有grid,對於特定記錄,我保持活動/不活動狀態。 這是那種狀態的看法
當我單擊活動按鈕時,它將顯示此警報消息。
但是當我單擊取消按鈕時,我無法停止將要處於活動狀態的操作。
這是此活動/非活動按鈕的html代碼段
@if (item.Status == true)
{
<button class="btn btn-xs active btn-primary" data-HEI_ID = "@item.HEI_ID" data-status = "true" onclick="confirm_active()">Active</button>
<button class="btn btn-xs inactiveColor btn-default" data-HEI_ID = "@item.HEI_ID" data-status = "false" onclick="confirm_inactive()">Inactive</button>
}
else
{
<button class="btn btn-xs btn-default" data-HEI_ID = "@item.HEI_ID" data-status = "true" onclick="confirm_active()">Active</button>
<button class="btn btn-xs inactiveColor btn-primary active" data-HEI_ID = "@item.HEI_ID" data-status = "false" onclick="confirm_inactive()">Inactive</button>
}
這是警報消息的腳本部分
<script type="text/javascript">
function confirm_active() {
var retVal = confirm("Are you sure you want to change the status to Active?");
if (retVal == true) {
// do stuff
return true;
} else {
return false;
}
}
function confirm_inactive() {
var retVal = confirm("Are you sure you want to change the status to Inactive?");
if (retVal == true) {
// do stuff
return true;
} else {
return false;
}
}
如何使可行的取消按鈕
您錯過了onclick
處理程序中的return
語句。 另外請注意,以分號結束函數調用是一種很好的做法
更改
onclick="confirm_active()"
至
onclick="return confirm_active();"
同樣適用於confirm_inactive()
。
如果您使用返回任何值的onclick函數,則必須在函數之前寫return
此處為示例)
@if (item.Status == true)
{
<button class="btn btn-xs active btn-primary" data-HEI_ID = "@item.HEI_ID" data-status = "true" onclick="return confirm_active()">Active</button>
<button class="btn btn-xs inactiveColor btn-default" data-HEI_ID = "@item.HEI_ID" data-status = "false" onclick="return confirm_inactive()">Inactive</button>
}
else
{
<button class="btn btn-xs btn-default" data-HEI_ID = "@item.HEI_ID" data-status = "true" onclick="return confirm_active()">Active</button>
<button class="btn btn-xs inactiveColor btn-primary active" data-HEI_ID = "@item.HEI_ID" data-status = "false" onclick="return confirm_inactive()">Inactive</button>
}
您也可以在您的html中寫直接確認
<button class="btn btn-xs btn-default" data-HEI_ID = "@item.HEI_ID" data-status = "true" onclick='confirm("Are you sure you want to change the status to Inactive?")'>Active</button>
您需要將值返回給創建此事件的元素。 您在單擊該元素時調用一個函數,元素如何知道該函數的返回值。 因此,您需要在點擊時使用return confirm_inactive()
來代替confirm_inactive()
。
使用confirm_inactive()就像
function onClick(){
confirm_inactive()
}
返回confirm_inactive()就像
function onClick(){
return confirm_inactive()
}
在第一種情況下,即使Confirm_inactive()返回某些內容,調用onClick()也會使您不確定。 但是在第二種情況下,當您調用onClick()時,它將調用Confirm_inactive()並返回其結果。
這個例子只是為了理解問題。
<!DOCTYPE html>
<html>
<head>
<META HTTP-EQUIV="Content-Language" charset="UTF-8">
<script type="text/javascript" src="jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<style>
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>University ID</th>
<th>University Name</th>
<th>Established Year</th>
<th>Type</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>000001</td>
<td>Kelum U</td>
<td>1976</td>
<td class="privacy">Private</td>
<td class="status">
<button class='btn btn-xs btn-default confirm_active' data-HEI_ID = '@item.HEI_ID' data-status = 'true'>Active</button><button class='btn btn-xs btn-danger active confirm_inactive' data-HEI_ID = '@item.HEI_ID' data-status = 'false'>Inactive</button>
</td>
</tr>
<tr>
<td>000002</td>
<td>Wiling M</td>
<td>1977</td>
<td class="privacy">Public</td>
<td class="status">
<button class='btn btn-xs btn-default confirm_active' data-HEI_ID = '@item.HEI_ID' data-status = 'true'>Active</button><button class='btn btn-xs btn-danger active confirm_inactive' data-HEI_ID = '@item.HEI_ID' data-status = 'false'>Inactive</button>
</td>
</tr>
</tbody>
</table>
<script>
$(".status .confirm_active").on('click', function(){
var retVal = confirm("Are you sure you want to change the status to Active?");
if(retVal == true){
$(this).removeClass('btn-default').addClass('btn-primary active');
$(this).closest('.status').find('.confirm_inactive')
.removeClass('btn-danger active').addClass('btn-default');
$(this).closest('tr').find('.privacy').html('Private');
}
});
$(".status .confirm_inactive").on('click', function(){
var retVal = confirm("Are you sure you want to change the status to Inactive?");
if(retVal == true){
$(this).removeClass('btn-default').addClass('btn-danger active');
$(this).closest('.status').find('.confirm_active')
.removeClass('btn-primary active').addClass('btn-default');
$(this).closest('tr').find('.privacy').html('Public');
}
});
</script>
</body>
</html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.