0

我有一个按钮，我用 jQuery 隐藏/显示，这取决于是否选中了复选框。这适用于除 Chrome 之外的所有浏览器。按钮获取display: block;样式，但不出现。如果我在它上面移动鼠标，我可以看到这个按钮变成了0px heightand width。我试过给按钮一个固定的大小，但它没有帮助（如果我display: block;默认给一个也没有）。有任何想法吗？

我需要使用 .checbox div，因为我使用的是花哨的 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>
4

2 回答 2

0

我在 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

于 2012-10-17T13:49:01.387 回答
0

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

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

请参阅此工作示例...

http://jsfiddle.net/ESfTv/

于 2012-10-17T14:17:00.863 回答