I've run into some really bizarre behaviour. I have been unable to replicate this on jsfiddle or bootply for some reason, and it's restricted to Chrome only (haven't tried other WebKit browsers).
I have an button, which can actually be an <a>, <span> <div> or <button> with the class "btn" from Twitter Bootstrap and whatever else I choose (in this case 'btn-danger', but it happens with anything).
When the user clicks the button it adds input fields until it reaches a maximum where I disable the button using jQuery. A simple button.attr('disabled', true);
Now, the added fields have a little fontAwesome 'x' a user can click to remove it, which re-enables the button. I've included an image below of what this looks like:
On Chrome, when the button.attr('disabled', false); executes in the click handler (shown below) the button disappears, until the user's mouse hovers over the button.
$('.append-options').on('click', 'a.remove-option', function(e){
$(this).parent('.form-group').remove();
if(!maxOptions()){
button.attr('disabled', false);
}
return false;
});
I have tried a dozen different implementations of this and it still happens. I've tried adding some more JS after the re-enabling code to "jog" it into showing up, but nothing has worked. If I manually enable/disable the button in the Chrome console, it works just fine. This is not an issue in IE/Firefox.
Now, I have narrowed down a straight-up weird list of conditions that ALL must be true for this to happen but I can't seem to make heads or tails of why.
If the 'btn' class is not on the button it doesn't happen. I've narrowed it down to this line in the .btn css. If I remove it, it doesn't happen:
border: 1px solid transparent;This link/button/span/div is inside a form. There is another button in the form with the HTML shown below. It is higher up in the page than the button in question. If I move its position to being below the "add option" button, the problem is gone.
<button type="submit" class="btn btn-success btn-lg pull-right">Update</button>FontAwesome appears to be somewhat involved in this issue. If I remove the css file from the page, the problem is gone. But then I have no font-awesome. I have tried removing the font-awesome on the specific items involved but that doesn't seem to make a difference.
For what it's worth, I've validated my HTML on W3C, so it's not because of invalid markup.
Anyone have any ideas on how/why this could be happening? I know without a jsfiddle it's somewhat hard, but maybe a general area in which I could look to try and resolve this?
Any help is appreciated.
