使用 Jquery/css 删除移动 Chrome 上的红色边框

Question

我正在尝试从用于突出显示验证错误的 div 中删除红色边框。我想用透明度替换边框，因此当单击具有.swatches 类的元素时，边框被“移除”。

此代码确实有效（包括注释掉的行），但此问题出现在 Mobile Chrome 上。

知道可能是什么问题吗？

cf 和 colour-form-field 类没有任何关联的样式。

$('.swatches').click(function(){
    removeValidationBorder('#optionHolder', 'transparent'); //#f8f8f8
});

这是我的功能。

function removeValidationBorder(el, color) {
    console.log('removeValidationBorder');
    //if ($(el).css('color') == 'rgb(0, 0, 0)' || $(el).css('color') == 'red') {
    if ($(el).css('color') != color) {
        console.log('colors do not match');
        //$(el).css('border','2px solid ' + color);
        $(el).css({"border-width" : "2px", "border-style" : "solid", "border-color" : color});
    }
}

这是HTML：

<div id="optionHolder" class="cf colour-form-field" style="border: 2px solid transparent; margin-bottom: 4px;">
    <div id="colOptions" class="form-label">
      <h6>Select a colour: <span id="selectedColor">Silver - add £10.00</span></h6>
     </div>
     <ul class="swatches">
       <li id="productSwatch_83995"><a id="photoswitch_76171" title="Natural" href="#"><img src="images/products/options/76166_swatch.png" width="46" height="36" alt="Natural" title="Natural" border="0"><p><span>Natural</span></p></a></li>
       <li id="productSwatch_83996"><a id="photoswitch_76172" title="Black" href="#"><img src="images/products/options/76167_swatch.png" width="46" height="36" alt="Black" title="Black" border="0"><p><span>Black - add £10.00</span></p></a></li>
       <li id="productSwatch_83997"><a id="photoswitch_76173" title="Sand" href="#"><img src="images/products/options/76168_swatch.png" width="46" height="36" alt="Sand" title="Sand" border="0"><p><span>Sand - add £10.00</span></p></a></li>
       <li id="productSwatch_83998"><a id="photoswitch_76174" title="Cappuccino" href="#"><img src="images/products/options/76169_swatch.png" width="46" height="36" alt="Cappuccino" title="Cappuccino" border="0"><p><span>Cappuccino - add £10.00</span></p></a></li>
       <li id="productSwatch_83999" class="selected"><a id="photoswitch_76175" title="Silver" href="#"><img src="images/products/options/76170_swatch.png" width="46" height="36" alt="Silver" title="Silver" border="0"><p><span>Silver - add £10.00</span></p></a></li>
   </ul>                        

<input type="hidden" name="options[1]" value="83999" id="photoOptionDropDown">
</div>

Answer 1

你可以试试：

var color = none;

和border 将被破坏，并且不会显示。

Answer 2

这不起作用，因为 .click 已被移动 chrome 弃用。我无法使用 jquery mobile 调用我的函数：

$('#selectedColor').on('DOMSubtreeModified', function(){
    removeValidationBorder('#optionHolder', 'transparent');
});