jQuery .removeClass（）僅在Chrome中發佈，在IE11中正常工作

我有一個奇怪的問題。我正在使用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>

來源

2017-07-28 ikaza

我想是因爲當警報被拋出它阻止UI線程，從而不執行你的代碼的其餘部分不會在Chrome中工作（加/刪除紅色邊框）。

我定你的代碼在IE和Chrome的工作（沒有測試爲Mozilla）

看到的setTimeout。

$(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; 
 
    
 
    $('input.newName.redColorBorder').removeClass("redColorBorder"); 
 
    
 
    var fnExec = function(idx) { 
 
\t if (idx == rows.length) 
 
\t \t return; 
 
    var textBox = jQuery(rows[idx]).find('input.newName'); 
 
    var newName = textBox.val(); 
 
    var isValid = newName == "Article1" ? true : false; 
 
    if (isValid == true) { 
 
     textBox.addClass("redColorBorder"); 
 
\t setTimeout(function(){ 
 
\t \t var confirm = disp_confirm(idx); 
 
\t \t if (confirm) { 
 
\t \t \t if (textBox.hasClass("redColorBorder")) { 
 
\t \t \t textBox.removeClass("redColorBorder"); 
 
\t \t \t } 
 
\t \t \t fnExec(idx+1); 
 
\t \t } 
 
\t }, 10); 
 
    } 
 
\t else { 
 
\t \t fnExec(idx+1); 
 
\t } 
 
    } 
 
    fnExec(1); 
 
    
 
} 
 
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>

問候，

蒂博P.

來源

2017-07-28 10:05:56

但這裏的請求轉到服務器即使驗證失敗，或者用戶點擊取消.. – zainul

jQuery .removeClass（）僅在Chrome中發佈，在IE11中正常工作

回答

相關問題