jquery nhấp vào lực lượng neo phần tử di chuyển lên đầu trang?

Question

jQuery hyperlinks - href value? văn bản] [1]

Tôi đang gặp sự cố khi sử dụng jquery và sự kiện nhấp được đính kèm với phần tử neo. [1]: jQuery hyperlinks - href value? Câu hỏi "SO" này có vẻ là một bản sao và câu trả lời được chấp nhận dường như không giải quyết được sự cố. Xin lỗi nếu điều này là xấu SO nghi thức.

Trong chức năng của tôi đã sẵn sàng() Tôi có:

jQuery("#id_of_anchor").click(function(event) { //start function when any update link is clicked 
     Function_that_does_ajax(); 
     }); 

và neo của tôi trông như thế này:

<a href="#" id="id_of_anchor"> link text </a> 

nhưng khi liên kết được nhấp, hàm ajax được thực hiện như mong muốn, nhưng trình duyệt cuộn lên đầu trang. không tốt.

Tôi đã thử thêm:

event.preventDefault(); 

trước khi gọi chức năng của tôi mà không được ajax, nhưng điều đó không giúp đỡ. Tôi đang thiếu gì?

Làm rõ

Tôi đã sử dụng tất cả các kết hợp của

return false; 
event.preventDefault(); 
event.stopPropagation(); 

trước và sau cuộc gọi của tôi để js của tôi chức năng ajax. Nó vẫn cuộn đến đỉnh.

Answer 1

Điều đó sẽ hiệu quả, bạn có thể làm rõ ý của mình trước "trước" không? Có phải bạn đang làm thứ này?

jQuery("#id_of_anchor").click(function(event) { 
    event.preventDefault(); 
    Function_that_does_ajax(); 
}); 

Vì rằng nên làm việc theo nghĩa là nếu nó không làm việc bạn đang làm điều gì đó sai và chúng tôi cần phải xem mã nhiều hơn nữa. Tuy nhiên, vì lợi ích của sự hoàn chỉnh, bạn cũng có thể thử điều này:

jQuery("#id_of_anchor").click(function() { 
    Function_that_does_ajax(); 
    return false; 
}); 

EDIT

Here is an example of this working.

Hai liên kết sử dụng mã này:

$('#test').click(function(event) { 
    event.preventDefault(); 
    $(this).html('and I didnt scroll to the top!'); 
}); 

$('#test2').click(function(event) { 
    $(this).html('and I didnt scroll to the top!'); 
    return false; 
}); 

Và như bạn có thể thấy họ đang làm việc tốt.

Answer 2

$("#id_of_anchor").click(function(event) { 
    // ... 
    return false; 
} 

Answer 3

Câu hỏi này là một bài tập gỡ lỗi vì nó đã tuyên bố rằng bạn đang sử dụng các chức năng chính xác từ jQuery Event object.

Trong một xử lý sự kiện jQuery, bạn có thể làm một trong hai, hoặc cả hai, trong hai điều cơ bản:

1. Ngăn chặn hành vi mặc định của phần tử (a href = "#", trong trường hợp của bạn) :

jQuery("#id_of_anchor").click(function(evt) { 
    // ... 
    evt.preventDefault(); // assuming your handler has "evt" as the first parameter 
    return false; 
} 

2. Dừng sự kiện từ tuyên truyền để xử lý sự kiện trên các yếu tố HTML xung quanh:

jQuery("#id_of_anchor").click(function(evt) { 
    // ... 
    evt.stopPropagation(); // assuming your handler has "evt" as the first parameter 
} 

Vì bạn đang không nhận được hành vi mong đợi, bạn nên đưa ra các cuộc gọi ajax tạm thời, thay thế nó bằng một số mã vô thưởng vô phạt như thiết lập một giá trị biểu mẫu, hoặc cảnh báo -shudder- ("OK") và kiểm tra xem bạn có còn cuộn lên đầu hay không.

Answer 4

bạn có thể sử dụng javascript: void (0); tài sản href.

Answer 5

Tôi đã gặp sự cố tương tự.

Tôi nghĩ điều đó xảy ra khi bạn ràng buộc sự kiện trước khi thêm phần tử vào DOM.

Answer 6

Như Tilal nói ở trên:

<a id="id_of_anchor" href="javascript:void(0)" /> 

giữ thẻ neo nhìn thẳng, cho phép bạn gán bộ xử lý nhấp chuột vào nó với javascript, và không di chuyển. Chúng tôi sử dụng nó rộng rãi chỉ vì lý do này.

Answer 7

Nó đã giúp tôi rất nhiều với mã bên dưới. Cảm ơn bạn!

 $(document).ready(function() { 
     $(".dropdown dt a").click(function(event) { 
     event.preventDefault(); 
      $(".dropdown dd ul").toggle('slow'); 
     });   
     $(".dropdown dd ul li a").click(function(event) { 
     event.preventDefault(); 
      $(".dropdown dd ul").hide(); 
     }); 
    }); 

Answer 8

chỉ mất

href="#" 

Trong thẻ một html ... đó là những gì làm cho trang web để "nhảy lên".

<a id="id_of_anchor"> link text </a> 

và nhớ thêm

cursor: pointer; 

đến của một bạn css vì vậy nó sẽ trông giống như một liên kết trên mouseover.

Chúc may mắn.