1
我有一個奇怪的問題。我正在使用removeClass
和addClass
在jquery
但他們工作正常IE和Chrome不按預期方式工作。該類正在被添加和刪除,但效果在Chrome中不可見。當彈出窗口出現時,單擊是時,下一個文本框應該會顯示紅色邊框,並且應該會顯示另一個彈出窗口,但在Chrome中不會出現邊框更改。jQuery .removeClass()僅在Chrome中發佈,在IE11中正常工作
- 在裝載某些文本框時有紅色邊框。
- 單擊開始按鈕,所有文本框都沒有邊框,彈出窗口出現,某些文本框變爲紅色邊框。
- 單擊是,出現另一個彈出窗口,另一個文本框變爲紅色邊框。
- 點擊取消,彈出停止,當前唯一的文本框有紅色邊框。
請檢查chrome和IE中插入的代碼段,並說明爲什麼這種不規則行爲。下面是工作片段:
$(document).ready(function() {
debugger;
var grid = jQuery('[id$="gvTest"]')[0];
var rows = grid.rows;
for (var k = 1; k < rows.length; k++) {
var textBoxInitial = jQuery(rows[k]).find('input.newName');
if (textBoxInitial.val() == "Article1") {
textBoxInitial.addClass("redColorBorder");
}
}
});
function proceedCopyValidation() {
var grid = jQuery('[id$="gvTest"]')[0];
var rows = grid.rows;
for (var k = 1; k < rows.length; k++) {
var textBoxInitial = jQuery(rows[k]).find('input.newName');
if (textBoxInitial.hasClass("redColorBorder")) {
textBoxInitial.removeClass("redColorBorder");
}
}
for (var k = 1; k < rows.length; k++) {
var textBox = jQuery(rows[k]).find('input.newName');
var newName = textBox.val();
var isValid = newName == "Article1" ? true : false;
if (isValid == true) {
textBox.addClass("redColorBorder");
var confirm = disp_confirm(k);
if (!confirm) {
return false;
} else {
if (textBox.hasClass("redColorBorder")) {
textBox.removeClass("redColorBorder");
}
continue;
}
}
}
}
function disp_confirm(count) {
var r = confirm("A pop-up here");
return r;
}
.redColorBorder {
border: solid 5px red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1">
</head>
<body>
<form method="post" id="ctl01">
<span id="FeaturedContent_Label1">Done here</span>
<div>
<table class="GridNew " cellspacing="5" cellpadding="5" rules="all" border="1" id="FeaturedContent_gvTest" style="border-color:#CED1D5;width:650px;">
<tbody>
<tr class="headerColor">
<th class="headerColor" scope="col">Old Name</th>
<th class="headerColor" scope="col" style="width:15%;">New Name</th>
</tr>
<tr>
<td class="alignleft" style="width:15%;">Product 1</td>
<td class="alignleft">
<input name="ctl00$FeaturedContent$gvTest$ctl02$TextBox1" type="text" value="Article1" id="FeaturedContent_gvTest_TextBox1_0" class="newName" style="width:80%;">
</td>
</tr>
<tr>
<td class="alignleft" style="width:15%;">Product 2</td>
<td class="alignleft">
<input name="ctl00$FeaturedContent$gvTest$ctl03$TextBox1" type="text" value="Article2" id="FeaturedContent_gvTest_TextBox1_1" class="newName" style="width:80%;">
</td>
</tr>
<tr>
<td class="alignleft" style="width:15%;">Product 3</td>
<td class="alignleft">
<input name="ctl00$FeaturedContent$gvTest$ctl04$TextBox1" type="text" value="Article1" id="FeaturedContent_gvTest_TextBox1_2" class="newName redColorBorder" style="width:80%;">
</td>
</tr>
<tr>
<td class="alignleft" style="width:15%;">Product 4</td>
<td class="alignleft">
<input name="ctl00$FeaturedContent$gvTest$ctl05$TextBox1" type="text" value="Article1" id="FeaturedContent_gvTest_TextBox1_3" class="newName" style="width:80%;">
</td>
</tr>
</tbody>
</table>
</div>
<input name="ctl00$FeaturedContent$btnStart" type="button" value="Start" onclick="return proceedCopyValidation();" id="FeaturedContent_btnStart">
</form>
</body>
但這裏的請求轉到服務器即使驗證失敗,或者用戶點擊取消.. – zainul