Question

I have a button which I’m hiding/showing with jQuery, depending if a checkbox is checked or not. This works great in every browser, except Chrome. The button gets the display: block; style, but it doesn’t appear. If i move the mouse on it, I can see that this button gets 0px height and width. I’ve tried giving the button a fixed size, but it didn’t helped (neither if I give a display: block; by default). Any ideas?

I need to use the .checbox div be cause I’m using fancy checkbox. The input is hidden.

CSS:

button {
    background-color: #A01823;
    border: 1px solid #710F12;
    color: #FFFFFF;
    float: right;
    font-size: 15px;
    margin: 2px 0 0;
    padding: 3px 10px 5px;
    text-align: center;
}

JS:

$(document).on("click",".enter_chat .checkbox",function() {
    enter_chat();
});

$(document).ready(function() {
    enter_chat(true);
});

function enter_chat(init) {
    init = typeof a !== 'undefined' ? init : false;
    if ($("#enter_chat").is(':checked')) {
        $("#btn_enter_chat").hide();
        $("#messaging_view_send_message").keyup(function(event) {
            if(event.keyCode == 13) {
                $("#btn_enter_chat").click();
            }
        });
    } else {
        $("#btn_enter_chat").show();
        $("#messaging_view_send_message").unbind();
    }
}

HTML:

<div class="enter_chat">
   <div class="checkbox" style="background-position: 0px 0px;">
      <input id="enter_chat" type="checkbox" checked="checked" name="enter_chat" value="1">
      <label>Submit by pressing enter</label>
   </div>
</div>
<button type="submit" name="messaging_view[submit]" class="btn_comment" id="btn_enter_chat">Send message</button>

Answer 1

You need to change the document.ready code to this…

$(document).on("click","#enter_chat",function() {
    enter_chat();
});

See this working example…

http://jsfiddle.net/ESfTv/