переключить ссылку в JQuery

Question

Я пытаюсь переключить ссылку с идентификатором showmember.

Я сделал следующее

$("#table2").hide(); //this is for hiding table when page loads first time
$("#showmember").toggle(function(){
       $("#table2").show(); 
       $("#showmember").html("Hide Member Details");      
       event.preventDefault();
       }, 
       function () {
       $("#table2").hide(); 
       $("#showmember").html("Show Member Details");      
       event.preventDefault();
});
<a id="showmember" href="" >Show Member</a>

Однако иногда это работает, а иногда нет. На самом деле, это дает мне ошибку JS при загрузке первой страницы, говоря «Ожидается объект», когда я нажимаю на ссылку, она переходит на другую страницу. когда я нажимаю кнопку браузера назад и возвращаюсь на исходную страницу, тогда все работает как положено. Я использую ie6

Answer 1

Вы не передаете объект события в функцию.

$("#table2").hide(); //this is for hiding table when page loads first time
$("#showmember").toggle( function(event){
          $("#table2").show(); 
          $("#showmember").html("Hide Member Details");      
          event.preventDefault();
       }, 
       function (event) {
          $("#table2").hide(); 
          $("#showmember").html("Show Member Details");      
          event.preventDefault();
});
<a id="showmember" href="" >Show Member</a>

Answer 2

Если вы удалите строку event.preventDefault() из переключателей, она должна работать правильно. Я протестировал следующий код в IE6.

$(function() {
    $("#table2").hide(); //this is for hiding table when page loads first time
    $("#showmember").toggle(
        function() {
            $("#table2").show();
            $("#showmember").html("Hide Member Details");
        },
        function() {
            $("#table2").hide();
            $("#showmember").html("Show Member Details");
        }
    );
});

Я не думаю, что вам нужно предотвращать действие по умолчанию в вашем случае, потому что вы не дали атрибуту href привязки значение. Если вы решите предотвратить действие по умолчанию, вам нужно будет определить параметр события в ваших обработчиках переключения, как уже упоминали другие.

$(function() {
    $("#table2").hide(); //this is for hiding table when page loads first time
    $("#showmember").toggle(
        function(e) {
            $("#table2").show();
            $("#showmember").html("Hide Member Details");
            e.preventDefault();
        },
        function(e) {
            $("#table2").hide();
            $("#showmember").html("Show Member Details");
            e.preventDefault();
        }
    );
});

Answer 3

Вам нужно будет передать событие как параметр, как сказали другие, но я предполагаю, что это может быть связано с кодом, выполняющимся до того, как ссылка действительно загрузится? Попробуйте переместить код в блок $ (document) .ready ():

$(document).ready(function(){
  //Your code:
  $("#table2").hide(); //this is for hiding table when page loads first time
  $("#showmember").toggle( function(event){
          $("#table2").show(); 
          $("#showmember").html("Hide Member Details");      
          event.preventDefault();
       }, 
       function (event) {
          $("#table2").hide(); 
          $("#showmember").html("Show Member Details");      
          event.preventDefault();
  });
});

Вы должны поместить код, который взаимодействует с элементами на странице (при загрузке страницы) в эту функцию.

Извините, если вы делаете это и просто пропустили эту деталь:)

(Кроме того, извините, если вы не пытаетесь сделать это при загрузке страницы, я просто прочитал вопрос снова, и теперь я не уверен ...)

Answer 4

Вам не хватает ссылки на событие параметра в функциях-обработчиках, но вы не уверены, что это является причиной вашей проблемы, но может помочь избежать исключения, когда оно выполняется

$("#showmember").toggle(function(event){
       $("#table2").show(); 
       $("#showmember").html("Hide Member Details");      
       event.preventDefault();
       }, 
       function (event) {
       $("#table2").hide(); 
       $("#showmember").html("Show Member Details");      
       event.preventDefault();
});