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中正常工作

回答

相关问题