Question

我有一个按钮，我正在使用jQuery隐藏/显示，具体取决于是否选中了复选框。这在除Chrome之外的每个浏览器中都很有用。该按钮获得display: block;样式，但不会出现。如果我在其上移动鼠标，我可以看到此按钮获得0px height和width。我试过给按钮一个固定的大小，但它没有帮助（默认情况下我没有提供display: block;）。有什么想法吗？

我需要使用.checbox div因为我正在使用fancy checkbox。 input为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

我在html中使用了以下代码以及所有其他脚本，并且它在Chrome中的所有浏览器中都可以正常工作

<pre>
    <input type="checkbox" class="enter_chat" id="enter_chat" checked="checked"/>
    <button type="submit" name="messaging_view[submit]" class="btn_comment" id="btn_enter_chat"> Send message </button>

我建议您右键单击Chrome浏览器，然后单击检查元素，然后查看控制台是否存在错误... 另外对于Firefox使用 firebug 总是

Answer 2

您需要将document.ready代码更改为此...

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

请参阅此工作示例...

http://jsfiddle.net/ESfTv/

Chrome中的jQuery show（）按钮

2 个答案: