jQueryイベントは新しい作成された要素では機能しません

img要素を ".follow"クラスで取得し、それを非表示にして、 ".followbutton"クラスの新規作成要素ボタンに置き換えます。 "mouseout"イベントの後、私はこの新しい作成されたボタン要素を受け取り、それを非表示にして、クラス ".follow"を持つ新しい作成されたimg要素に置き換えます。最後に、最初は同じ属性を持つ新しい要素imgがあります。しかし、現在、「マウスセンター」は機能しません。なぜ私はそれを理解しません。jQueryイベントは新しい作成された要素では機能しません

$(".follow") 
 
    .on("mouseenter", function() { 
 
     $(this).fadeOut(150, function() { 
 
      var init = this; 
 
      var btn = document.createElement("BUTTON"); 
 
      var t = document.createTextNode("Follow"); 
 
      btn.appendChild(t); 
 
      btn.className = "followbutton"; 
 
      $(btn).hide(); 
 
      $(this).replaceWith(btn); 
 
      $(".followbutton").show(150); 
 
      $(".followbutton").on("mouseout", function() { 
 
       var imgback = $("<img />", { 
 
        class: "follow", 
 
        src: "img/remove.png", 
 
       }).hide(); 
 
       $(this).hide(150); 
 
       $(this).replaceWith(imgback); 
 
       $(".follow").show(150); 
 
      }); 
 
     }); 
 
    });

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <script type="text/javascript" src="script.js"></script> 
 
\t <title>Follow</title> 
 
</head> 
 
<body> 
 
    
 
    <img src="img/remove.png" class="follow"> 
 
    
 
</body> 
 
</html>

出典

2016-08-24 goodgrief

新しいimgタグを作成するときに.followであなたのリスナーを失い、それをあなたの文書を交換するので。代わりにイベントの委任を使用する必要があります。あなたはこのような状況のために、デリゲートを使用することができます

$(document).on("mouseenter", ".follow", function() { /* ... */ });

$(document).on("mouseenter", ".follow", function() { 
 
     $(this).fadeOut(150, function() { 
 
      var init = this; 
 
      var btn = document.createElement("BUTTON"); 
 
      var t = document.createTextNode("Follow"); 
 
      btn.appendChild(t); 
 
      btn.className = "followbutton"; 
 
      $(btn).hide(); 
 
      $(this).replaceWith(btn); 
 
      $(".followbutton").show(150); 
 
      $(".followbutton").on("mouseout", function() { 
 
       var imgback = $("<img />", { 
 
        class: "follow", 
 
        src: "img/remove.png", 
 
       }).hide(); 
 
       $(this).hide(150); 
 
       $(this).replaceWith(imgback); 
 
       $(".follow").show(150); 
 
      }); 
 
     }); 
 
    });

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <script type="text/javascript" src="script.js"></script> 
 
\t <title>Follow</title> 
 
</head> 
 
<body> 
 
    
 
    <img src="img/remove.png" class="follow"> 
 
    
 
</body> 
 
</html>

出典

2016-08-24 07:15:36 eisbehr

動作します。ありがとう！ – goodgrief

よろしくお願いいたします。 – eisbehr

。これは、要素へのイベントの添付の問題を解決します。以下のコードを試してください。

$(document).delegate(".follow","mouseenter", function() { 
    //YOUR CODE 
});

出典

2016-08-24 07:22:34 Kashyap

jQuery 1.7以降、 '.delegate（）'は '.on（）'メソッドに取って代わられました。だからあなたは本当に 'delegate'をもう使用してはいけません。 – eisbehr

新しく追加されたアイテムにイベントを添付しても、何も起こりません。これは、以前にアタッチしたイベントハンドラが直接バインドされているためです。ダイレクトイベントは、.on（）メソッドが呼び出された時点で要素にのみアタッチされます。例えば下記のリンクを参考にして理解してください。

https://learn.jquery.com/events/event-delegation/

出典

2016-08-24 07:22:56 Dhruv

jQueryイベントは新しい作成された要素では機能しません

答えて

関連する問題