jQuery thấy div và sau đó Disappearing

Question

Tôi xin lỗi trước thời hạn nếu đây là một câu hỏi đơn giản, tôi có mã này javascript:

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

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

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

Tôi có một nút trông này:

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

Khi Tôi nhấp vào nút Gửi Tôi muốn hiển thị kết quả div và giữ nó ở đó, nhưng trong Chrome nó bật lên và sau đó ngay lập tức biến mất, điều này là do hàm hide() ở đầu tài liệu của tôi đã sẵn sàng chưa?

Cảm ơn!

Answer 1

... là do hàm hide() ở đầu tài liệu của tôi đã sẵn sàng chưa?

Có thể. Tôi đoán trang đang làm mới. Nếu bạn không muốn điều đó, hãy sử dụng return false; trong trình xử lý.

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

hoặc event.preventDefault().

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

Answer 2

có kết quả của bạn ban đầu thiết lập để được ẩn qua CSS

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

Không chắc lý do tại sao bạn đang nhảy xung quanh theo cách bạn nên sử dụng $ .ajax. Sử dụng $ .get nếu đó là yêu cầu GET ... Liên kết với .live vì nó tốt hơn :). Let it be async bởi vì bạn không muốn máy chủ của bạn treo trong trường hợp có lỗi ...

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

Answer 3

Thay vì gửi, sử dụng mã này

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

Bây giờ bạn không cần phải return false; hoặc event.preventDefault(); trong javascript của bạn