Как сбросить jquery .on ()?

Question

У меня есть следующий код, который выбирает и присваивает события .on() определенным элементам, добавленным в навигацию. Проблема заключается в том, что если я затем снова запущу эту функцию, она назначит .on дважды, и, таким образом, когда я щелкну один из этих элементов, он запустится дважды, когда я хочу, чтобы он запускался только один раз.

Как удалить (ИЛИ СБРОСИТЬ) событие .on ()? Или запретить запуск дважды в один клик?

function fetchPlaylists() {
  firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
      $('.playlistsList').html('');
      $('.playlistsListOptions').html('');

      firebase
     .database()
     .ref('users/'+user.uid+'/Playlists')
     .orderByChild('timestamp')
     .once('value')
     .then(snapshot => {
       snapshot.forEach((item) => {
         // console.log(item.key);
         var playlistName = item.key;
         var playlistID = item.child("playlistID").val();
         // console.log(playlistID, " ID");

         //Add to the nav for playlists, and also append to the arr of playlists
         // console.log(playlistID);
         $('.playlistsList').append('<li class="playlistDiv" id="'+playlistID+'"><label class="playlistItem" id="playlistItem">'+playlistName+'</label></li>');
         $('.playlistsListOptions').append('<li class="playlistOptionDiv" id="'+playlistID+'"><label class="playlistOptionItem" id="playlistOptionItem">'+playlistName+'</label></li>');
       })

       // $(".playlistsList").on("click", ".playlistDiv", function(e) {
       //    // var int = parseInt($(this).attr('id'), 10);
       //    console.log("Somthing again again");
       //    $(".playlistDiv").children('.playlistItem').css("color","#919191");
       //    var playlistID = $(this).attr('id');
       //    $(this).children('.playlistItem').css("color","white");//#919191
       //    fetchAndDisplayPlaylist(playlistID, user.uid);
       // });
       //
       // $(".playlistsListOptions").on("click", ".playlistOptionDiv", function(e) {
       //    // var int = parseInt($(this).attr('id'), 10);
       //    $(".playlistOptionDiv").children('.playlistOptionItem').css("color","#919191");
       //    var playlistID = $(this).attr('id');
       //    $(this).children('.playlistOptionItem').css("color","white");//#919191
       //    addToXPlaylist(playlistID, currentPortal);
       // });
       //
       // $(".playlistOptionDiv").hover(
       //   // console.log("Somddjfgbskhfgbfhjd", $(this).children('.playlistOptionDiv').attr('id'));
       //   function() {
       //     var playlistID = $(this).attr('id');
       //     // console.log(playlistID);
       //     $(this).children('.playlistOptionItem').css("color","white");
       //     // $(this).children('.playlistOptionItem').css("background-color","rgba(255, 255, 255, 0.2)");
       //   }, function() {
       //     var playlistID = $(this).attr('id');
       //     $(this).children('.playlistOptionItem').css("color","#919191");
       //     // $(this).children('.playlistOptionItem').css("background-color","transparent");
       //   }
       // );

     })
     .catch(error => {
       //There was an error fetching playlists
       alert(error)
     });
     $(".playlistsList").on("click", ".playlistDiv", function(e) {
        // var int = parseInt($(this).attr('id'), 10);
        console.log("Somthing again again");
        $(".playlistDiv").children('.playlistItem').css("color","#919191");
        var playlistID = $(this).attr('id');
        $(this).children('.playlistItem').css("color","white");//#919191
        fetchAndDisplayPlaylist(playlistID, user.uid);
     });

     $(".playlistsListOptions").on("click", ".playlistOptionDiv", function(e) {
        // var int = parseInt($(this).attr('id'), 10);
        $(".playlistOptionDiv").children('.playlistOptionItem').css("color","#919191");
        var playlistID = $(this).attr('id');
        $(this).children('.playlistOptionItem').css("color","white");//#919191
        addToXPlaylist(playlistID, currentPortal);
     });


   } else {
     //User not signed up.
   }
  });
}

Answer 1

Вы можете использовать что-то вроде этого:

Unbind ():

Удалить ранее прикрепленный обработчик событий из элементов. [Сайт jQuery].

 $(".playlistsList").unbind("click").on("click",".playlistDiv", function(event){...}

Answer 2

Вы должны использовать .off()

 $(".playlistsList").off("click").on("click",".playlistDiv", function(event){...}

Однако

Поскольку .playlistsList имеет значение c, вы должны переместить событие слушателя за пределы fetchPlaylists метод.

Формат: $(staticAncestors).on(eventName, dynamicChild, function() {});

Так что в вашем случае

// set events
$(".playlistsList").on("click",".playlistDiv", function(event)

Прочитайте следующий ответ иметь лучшее понимание.

{ ссылка }

Answer 3

сначала вам нужно очистить ваш div и снова получить данные. я просто добавляю один код ($ ("#. playlistDiv"). empty ())

function fetchPlaylists() {
  firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
      $('.playlistsList').html('');
      $('.playlistsListOptions').html('');

      firebase
     .database()
     .ref('users/'+user.uid+'/Playlists')
     .orderByChild('timestamp')
     .once('value')
     .then(snapshot => {
       snapshot.forEach((item) => {
         // console.log(item.key);
         var playlistName = item.key;
         var playlistID = item.child("playlistID").val();
         // console.log(playlistID, " ID");

         //Add to the nav for playlists, and also append to the arr of playlists
         // console.log(playlistID);
         $('.playlistsList').append('<li class="playlistDiv" id="'+playlistID+'"><label class="playlistItem" id="playlistItem">'+playlistName+'</label></li>');
         $('.playlistsListOptions').append('<li class="playlistOptionDiv" id="'+playlistID+'"><label class="playlistOptionItem" id="playlistOptionItem">'+playlistName+'</label></li>');
       })

       // $(".playlistsList").on("click", ".playlistDiv", function(e) {
$("#.playlistDiv").empty()
       //    // var int = parseInt($(this).attr('id'), 10);
       //    console.log("Somthing again again");
       //    $(".playlistDiv").children('.playlistItem').css("color","#919191");
       //    var playlistID = $(this).attr('id');
       //    $(this).children('.playlistItem').css("color","white");//#919191
       //    fetchAndDisplayPlaylist(playlistID, user.uid);
       // });
       //
       // $(".playlistsListOptions").on("click", ".playlistOptionDiv", function(e) {
       //    // var int = parseInt($(this).attr('id'), 10);
       //    $(".playlistOptionDiv").children('.playlistOptionItem').css("color","#919191");
       //    var playlistID = $(this).attr('id');
       //    $(this).children('.playlistOptionItem').css("color","white");//#919191
       //    addToXPlaylist(playlistID, currentPortal);
       // });
       //
       // $(".playlistOptionDiv").hover(
       //   // console.log("Somddjfgbskhfgbfhjd", $(this).children('.playlistOptionDiv').attr('id'));
       //   function() {
       //     var playlistID = $(this).attr('id');
       //     // console.log(playlistID);
       //     $(this).children('.playlistOptionItem').css("color","white");
       //     // $(this).children('.playlistOptionItem').css("background-color","rgba(255, 255, 255, 0.2)");
       //   }, function() {
       //     var playlistID = $(this).attr('id');
       //     $(this).children('.playlistOptionItem').css("color","#919191");
       //     // $(this).children('.playlistOptionItem').css("background-color","transparent");
       //   }
       // );

     })
     .catch(error => {
       //There was an error fetching playlists
       alert(error)
     });
     $(".playlistsList").on("click", ".playlistDiv", function(e) {
        // var int = parseInt($(this).attr('id'), 10);
        console.log("Somthing again again");
        $(".playlistDiv").children('.playlistItem').css("color","#919191");
        var playlistID = $(this).attr('id');
        $(this).children('.playlistItem').css("color","white");//#919191
        fetchAndDisplayPlaylist(playlistID, user.uid);
     });

     $(".playlistsListOptions").on("click", ".playlistOptionDiv", function(e) {
        // var int = parseInt($(this).attr('id'), 10);
        $(".playlistOptionDiv").children('.playlistOptionItem').css("color","#919191");
        var playlistID = $(this).attr('id');
        $(this).children('.playlistOptionItem').css("color","white");//#919191
        addToXPlaylist(playlistID, currentPortal);
     });

     $(".playlistOptionDiv").hover(
       // console.log("Somddjfgbskhfgbfhjd", $(this).children('.playlistOptionDiv').attr('id'));
       function() {
         var playlistID = $(this).attr('id');
         // console.log(playlistID);
         $(this).children('.playlistOptionItem').css("color","white");
         // $(this).children('.playlistOptionItem').css("background-color","rgba(255, 255, 255, 0.2)");
       }, function() {
         var playlistID = $(this).attr('id');
         $(this).children('.playlistOptionItem').css("color","#919191");
         // $(this).children('.playlistOptionItem').css("background-color","transparent");
       }
     );

   } else {
     //User not signed up.
   }
  });
}