テーブルに非表示の行を表示

Question

私は次のコードに基づいていますJSFiddle。ユーザが「余分なものを表示」リンクをクリックすると、より多くの情報が表示されます。

私が抱えている問題は、テーブルの最下行以外のリンクをクリックすると隠れ要素が短時間表示されて閉じてしまうことです。

JavaScript文字列を使用してテーブルを作成しています。ここでIは、テーブルに行を追加するために使用するコードは、次のとおり

this.addRecordToTable = function(bet, index, id){ 
console.log(index); 
console.log($.data(bet)); 
var butId = id.toString(); 

if (bet.bookies == null){ 
    bet.bookies = ""; 
} 

if (bet.bet == null){ 
    bet.bet = ""; 
} 

var newRow = ` 
<tr> 
    <td>${bet.date}</td> 
    <td>${bet.bookies}</td> 
    <td>${bet.profit}</td> 
    <td><button id=${butId}>Delete</button></td> 
    <td><a href=\"#\" id=\"show_${index}\">Show Extra</a></td> 
</tr> 
<tr> 
    <td colspan=\"5\"> 
     <div id=\"extra_${index}\" style=\"display: none;\"> 
      <br>hidden row 
      <br>hidden row 
      <br>hidden row 
     </div> 
    </td> 
</tr> 
` 



console.log(newRow); 
console.log("#"+butId); 

$(newRow).appendTo($("#betTable")); 
$("#"+butId).click(
    function() 
    { 
     if (window.confirm("Are you sure you want to delete this record?")) 
     { 
      var rec = new Records(); 
      rec.removeRecordAt(index); 
      $("#betTable tbody").remove(); 
      var c = new Controller(); 
      c.init(); 
     } 

    }); 

$("a[id^=show_]").click(function(event) { 
    $("#extra_" + $(this).attr('id').substr(5)).slideToggle("slow"); 
    event.preventDefault(); 
}); 

}

EDIT：

イベントハンドラは、各要素に追加されたように、私は、$("a[id=show_"+index).click...に$("a[id^=show_]").clickを変更しなければなりませんでした新しい要素を追加する度に@ freedomn-mに感謝します。

Answer 1

このコード：それはので、すべてのショーaの試合セレクタ特定のID /コンテキストではありませんよう

$("a[id^=show_]") 

がに、すべての既存のリンクだけでなく、新しいものを新しいイベントハンドラを追加します。

あなたは例えば、コンテキスト（newRow）を追加したり、すでに定義されているループの一部として、既存の変数（複数可）を使用する必要があります。

$("a[id^=show_]", newRow) 
$("a#show_" + index) 

（あるいは動作します任意の他の変形）。

---

代替が動的に追加された要素、例えばのためにも、委任を使用することです：あなただけ定義する必要があります/一度イベントを呼びたい、それが解雇されるだろう

$(document).on("click", "a[id^=show_]", function... 

その場合には、新しい要素の場合（つまり、新しい行ループの外側に配置する場合）