Question

我对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的：

jQuery(document).ready(function() {

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

    });

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

Answer 1

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

<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>');
});

演示：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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>

Answer 2

将输入类型从提交更改为按钮。

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

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

2 个答案: