Якорь/кнопка исчезает на хроме и не появится снова, пока мышь не начнет использовать Bootstrap?

Question

Я столкнулся с каким-то действительно странным поведением. По какой-то причине я не смог реплицировать это по jsfiddle или bootply и ограничился только Chrome (не пробовал другие браузеры WebKit).

У меня есть кнопка, которая на самом деле может быть <a>, <span><div> или <button> с классом «BTN» от Twitter Bootstrap и все остальное, я выбираю (в данном случае «БТН-опасности», но это бывает с чем-нибудь) ,

Когда пользователь нажимает кнопку, он добавляет поля ввода, пока не достигнет максимума, где я отключу кнопку, используя jQuery. Простой button.attr('disabled', true);

Теперь добавленные поля имеют маленький fontAwesome 'x', который пользователь может щелкнуть, чтобы удалить его, что снова включает кнопку. Я включил изображение ниже того, что это выглядит так:

В Chrome, когда button.attr('disabled', false); выполняет в обработчик щелчка (как показано ниже) кнопка исчезает, пока мыши пользователя не наведен на кнопку.

$('.append-options').on('click', 'a.remove-option', function(e){ 
     $(this).parent('.form-group').remove(); 
     if(!maxOptions()){ 
      button.attr('disabled', false); 
     } 
     return false; 
    }); 

Я пробовал десяток различных реализаций этого, и это все еще происходит. Я попытался добавить еще несколько JS после повторного включения кода, чтобы «перетащить» его, но ничего не сработало. Если я вручную включаю/выключаю кнопку на консоли Chrome, она работает нормально. Это не проблема в IE/Firefox.

Теперь, я сузил верный странный список условий, в которых ВСЕ должно быть истинным, чтобы это произошло, но я не могу заставить головы или хвосты почему.

1. Если класса «btn» нет на кнопке, этого не происходит. Я сузил его до этой строки в .btn css. Если я удалю его, этого не произойдет: border: 1px solid transparent;

2. Эта ссылка/кнопка/span/div находится внутри формы. В форме есть еще одна кнопка с HTML, показанным ниже. Он выше на странице, чем соответствующая кнопка. Если я переместил свою позицию на кнопку «добавить вариант», проблема исчезнет. <button type="submit" class="btn btn-success btn-lg pull-right">Update</button>

3. FontAwesome, похоже, несколько вовлечен в эту проблему. Если я удалю css-файл со страницы, проблема исчезнет. Но тогда у меня нет шрифта - удивительного. Я попытался удалить шрифт - удивительный по конкретным элементам, но это, похоже, не имеет никакого значения.

Для чего это важно, я проверил свой HTML на W3C, так что это происходит не из-за недействительной разметки.

У кого-нибудь есть идеи о том, как и почему это может произойти? Я знаю, что без jsfiddle это несколько сложно, но, может быть, общая область, в которой я мог бы попытаться решить эту проблему?

Любая помощь приветствуется.

Answer 1

Добавление position: relative; в .btn устранит эту проблему.

Answer 2

У меня тоже была эта проблема.Я нашел, что есть правило CSS, которое соответствует отключенному состоянию кнопки. Мое исправление заключалось в том, чтобы просто добавить другое правило CSS цвета фона, которое я хотел с более высоким приоритетом соответствия.