Javascript 如何重置jquery.on（）？

我有下面的代码，它获取和分配.on事件到添加到nav的某些元素。问题是，如果我再次运行此函数，它将分配.on两次，因此当我单击其中一个元素时，当我希望它只运行一次时，它将运行两次

如何删除或重置.on事件？或者阻止它在一次单击中运行两次

---

您可以使用以下内容：

解除绑定：

从元素中删除以前附加的事件处理程序。[jQuery 网站]

---

首先，您需要清空div并再次获取数据。我只添加了一个代码$.playldiv.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.
   }
  });
}

你应该用。关

然而

由于.playlist是静态的，您应该将侦听器事件移到fetchPlaylists方法之外

格式：$static祖先.oneventName，dynamicChild，函数{}

那么你的情况呢

阅读下面的答案以便更好地理解

---

您是否尝试过使用onclick而不是使用.on…？如何删除on？使用关闭。但你最好从以下几种方式中选择一种重新思考你的方法：使用更具体的实时处理程序，例如$body.hasSong''on'hover'，'playlayoptiondiv'。。。然后只需切换一个类来切换live always on处理程序，在always on处理程序中使用一个条件，等等。。。添加和删除处理程序很麻烦。也是为了这个目的。这能回答你的问题吗？太好了，我做到了！不幸的是，需要等待5分钟。我会回来的！版本3.0中不推荐使用解除绑定方法。使用off方法代替。就像@hoangkianh所说的那样，使用.off与使用.on的方式相同。例如：$.playlist..offclick、.playlidiv、onclick、.playlidiv、functionevent{…}@isa123这能回答你的问题吗？如果你需要帮助，请告诉我。

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

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.
   }
  });
}

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

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