javascript - 按钮单击未运行 javascript

Question

我有一个按钮，我想隐藏/取消隐藏它下面的字段：

<button id="post1-new-comment-button" type="button">Click</button>
<input id="post1-new-comment" name="comment[body]" size="50" type="text" />

使用以下CSS

#post1-new-comment {
    display: none;
}

和 javascript

$(function() {
    return $("#post1-new-comment-button").click(function() {
        return $("#post1-new-comment").val("").toggle();
    });
});

但是，单击按钮时没有任何反应。我在这里做错了什么？在这里的jsfiddle：http: //jsfiddle.net/Z5hqZ/

Answer 1

你的小提琴没有工作，因为你没有 jquery。我更新了它并删除了退货。

http://jsfiddle.net/Z5hqZ/5/

$(function() {
  $("#post1-new-comment-button").click(function() {
    $("#post1-new-comment").val("").toggle();
  });
});

Answer 2

试试这个：

$(function() {
    $("#post1-new-comment-button").click(function() {
        $("#post1-new-comment").val("").toggle();
    });
});

Answer 3

请记住jQuery在您想要使用它时包含它，因为它不在您的小提琴上，而且您的 html 也是错误的，在您拥有的小提琴上：

<button id="post1-new-comment-button" type="button">

它应该是：

<button id="post1-new-comment-button"></button>

否则，输入将在按钮内。在您的示例中，您没有关闭<button>标签，也无需添加type="button"，也不需要return在 JavaScript 上...

更新的工作示例：http: //jsfiddle.net/darkajax/VKGdv/

Answer 4

对于隐藏/取消隐藏-

$(function() {
    $("#post1-new-comment-button").click(function() {
        $("#post1-new-comment").toggle();
    });
});

Answer 5

试试这个。并且不要忘记将 jsfiddle 的库设置为 jQuery，并在准备好的 DOM 上执行脚本

$(function() {
$("#post1-new-comment-button").click(function() {
    $("#post1-new-comment").toggle();
});

});

这是工作链接：http: //jsfiddle.net/Z5hqZ/2/

并且不要忘记按钮的结束标签

Answer 6

实际上所有以上/以下：

1. 你需要包括 jQuery
2. 你的按钮需要一个结束标签（最好是一些文本显示在中间的按钮上）

3. 仅使用以下内容：

   $(document).ready(function(){
     $("#post1-new-comment-button").click(function() {
       $("#post1-new-comment").toggle();
     });
   });