$（これ）はjavascriptで作成された要素で動作しませんか？

Question

スクリプトが機能しない理由がわかりません。ここに簡単な表があります：

<table> 
    <tr> 
    <th>Name</th> 
    <td>Paul Stevenson</td> 
    </tr> 
    <tr> 
    <th>Date</th> 
    <td>28. 09. 1978</td> 
    </tr> 
</table> 

スクリプトはth要素にリンクを追加します。

var toolbar = $("<div />"); 
var link = $("<a />").attr({"target" : "_blank"}); 
toolbar.append(gmaps); 

カーソルをth要素に移動すると、ツールバーが表示されます。

$('th').on("mouseenter mouseleave", function(e) { 
     if (e.type === 'mouseenter') { $(this).append(toolbar); } 
     else { $(this).find($("div")).remove() } 
    }); 

なぜ変数

var thisNext = $(this).parent().next().text(); 

TDテキストを取得しないとリンクすることを追加しませんか？あなたはそれだと思うものにそうthisが設定されていない - あなたは、ハンドラのthis外を使用しようとしている

Answer 1

あなたが関数内で$（this）を行う

$('th').on("mouseenter mouseleave", function(e) { 

その後、$（この）番目の要素を指しているが、あなたはテキスト

を取得するには（これを）$にアクセスしているとき

var thisNext = $(this).parent().next().text(); 

これは関数の外にあり、ここでは$（this）はウィンドウオブジェクトを指しています。

ここで適切なセレクターを使用してテキストを選択する必要がある場合は、ここをクリックしてくださいhttp://www.w3schools.com/jquery/jquery_selectors.asp

これは達成しようとしているものの最新コードです。

$('th').on("mouseenter mouseleave", function(e) { 

    if (e.type === 'mouseenter') { 

    var toolbar = $("<div />").css({ 
     "padding": "5px", 
     "background" : "#F8F8F8", 
     "position" : "absolute", 
     "borderRadius" : "5px 0 5px 5px", 
     "left" : "-30px", 
     "top" : "0", 
     "zIndex" : "99" 
    }); 

    var link = $("<a />").css({ 
     "display" : "block", 
     "height" : "20px", 
     "width" : "20px", 
     "marginBottom" : "5px", 
     "background-size" : "100%", 
     "position" : "relative"}).attr({ 
      "target" : "_blank" 
    }); 
    var thisNext = $($(this).parent().children('td')[0]).text(); 
    var gmaps = link.clone().css({"background" : "red"}).attr({ 
     href: 'https://www.google.cz/search?q=' + thisNext }); 
    toolbar.append(gmaps); 
    $(this).append(toolbar); } 
    else 
    { 
     $(this).children('div').remove(); 
    } 
    }); 

codepen：これがお手伝いしますhttp://codepen.io/deep2701/pen/YWVkkA?editors=0010#anon-signup

希望。

Answer 2

あなたにもcodepenを見ることができます。 $('th').on("mouseenter mouseleave", function(e) {thisは、thが実行されていることを示しています。あなたの例では、thisにアクセスして、それがあなたが望むものを参照していると仮定しています。