jQuery 显示 div 然后消失

Question

如果这是一个简单的问题，我提前道歉，我有这个 javascript 代码：

$(document).ready(function() {
    $("#results").hide();

    var html = $.ajax({ url: "ajax.php?db_list=get", async: false}).responseText;

    $("#submit").click(function () { 
        $("#results").show(); 
    });
});

我有一个看起来像这样的按钮：

<fieldset class="action">
        <button name="submit" id="submit">Submit</button>
</fieldset>

当我单击“提交”按钮时，我想显示结果 div 并将其保留在那里，但在 Chrome 中它弹出然后立即消失，这是因为我的文档顶部的 hide() 函数准备好了吗？

谢谢！

Answer 1

...这是因为我的文档顶部的 hide() 函数已准备好吗？

大概。我猜页面正在刷新。如果您不想这样做，请在处理程序中使用 return false;。

$("#submit").click(function () { 
    $("#results").show();
    return false; 
});

或event.preventDefault()。

$("#submit").click(function ( event ) { 
    $("#results").show();
    event.preventDefault();
});

Answer 2

将您的结果最初设置为通过 CSS 隐藏

/* CSS */
#results {
  display: none;
}

不知道为什么您要跳到应该使用 $.ajax 的方式。如果是 GET 请求，请使用 $.get...与 .live 绑定，因为它更好:)。让它是异步的，因为你不希望你的服务器在出现错误时挂起......

$(document).ready(function() {
  $('#submit').live('click', function(){
    $.get('ajax.php?db_list=get', function(data){
      $('#results').html(data);
      $('#results').show();
      return false;
    });
  });
});

Answer 3

使用此代码而不是提交

<input id='submitMe' type = 'button' value = 'Submit Me' />

现在您不必
返回假；
或者
event.preventDefault();在你的 JavaScript 中