Javascript jquery按钮单击更改闪烁并熄灭_Javascript_Jquery_Html

Javascript jquery按钮单击更改闪烁并熄灭

javascript jquery html

Javascript jquery按钮单击更改闪烁并熄灭,javascript,jquery,html,Javascript,Jquery,Html,我对jquery还很陌生，并尝试创建一个搜索按钮。我想在单击按钮时向div添加一些代码，但更改应用了一秒钟，然后消失（闪烁，好像页面再次加载）我的代码如下： HTML: <body>  <div id="tfheader"> <form id="tfnewsearch" method="get" action="">

我对jquery还很陌生，并尝试创建一个搜索按钮。我想在单击按钮时向div添加一些代码，但更改应用了一秒钟，然后消失（闪烁，好像页面再次加载）

我的代码如下：

HTML:

<body>
        <!-- HTML for SEARCH BAR -->
        <div id="tfheader">
                <form id="tfnewsearch" method="get" action="">
                        <input type="text" class="tftextinput" name="q" size="21" maxlength="120">
                        <input type="submit" name="search" id="search" value="search" class="tfbutton">
                </form>
        <div class="tfclear"></div>
        </div>

        <div id="container" class="cntnr">
                <p>My text here</p>
        </div>
</body>

jQuery(document).ready(function() {

    $("#search").click(function () {
            console.log('your message');
            $("#container").append('<div><p>Results displayed here</p></div>');
    });

    });


我的文本在这里

Jquery:

<body>
        <!-- HTML for SEARCH BAR -->
        <div id="tfheader">
                <form id="tfnewsearch" method="get" action="">
                        <input type="text" class="tftextinput" name="q" size="21" maxlength="120">
                        <input type="submit" name="search" id="search" value="search" class="tfbutton">
                </form>
        <div class="tfclear"></div>
        </div>

        <div id="container" class="cntnr">
                <p>My text here</p>
        </div>
</body>

jQuery(document).ready(function() {

    $("#search").click(function () {
            console.log('your message');
            $("#container").append('<div><p>Results displayed here</p></div>');
    });

    });

jQuery（文档）.ready（函数（）{
$（“#搜索”）。单击（函数（）{
log（“您的消息”）；
$（“#容器”）.append（“此处显示的结果”）；
});
});

控制台日志消息和div append都会应用一秒钟，然后立即关闭

事实上，页面正在重新加载，因为您正在通过单击表单提交表单（注意：这非常明显，因为您的控制台在单击时会清除。控制台输出通常只在重新加载时清除）。如果您不想提交表单，可以使用常规按钮替换它：

<input type="button" name="search" id="search" value="search" class="tfbutton">

或防止触发默认事件：

$("#search").click(function (e) {
  e.preventDefault();
  console.log('your message');
  $("#container").append('<div><p>Results displayed here</p></div>');
});

$（“#搜索”）。单击（功能（e）{
e、 预防默认值（）；
log（“您的消息”）；
$（“#容器”）.append（“此处显示的结果”）；
});

演示：

jQuery（文档）.ready（函数（）{
$（“#搜索”）。单击（功能（e）{
e、 预防默认值（）；
log（“您的消息”）；
$（“#容器”）.append（“此处显示的结果”）；
});
});

我的文本在这里
将输入类型从提交更改为按钮
<input type="button" name="search" id="search" value="search" class="tfbutton">


就像再次加载页面一样，它是正确的。提交表单后，页面将重新加载。如果您不打算这样做，请使用type=“button”
而不是type=“submit”