クリック時に動的に作成されたテーブル行を非表示にする

Question

現在、ボタンを押した後に動的に作成されたテーブル行を非表示にしようとしています。これまでは、私は動的関数の一部を扱うことができました。

各動的行には「キャンセル」ボタンと「保存」ボタンがあります。私はこれを容易に対応することができました。私の問題は実際には行自体と一緒に作業しています。私は今、行を非表示にする必要があり

$(function() { 
    $(".add").click(function(){ 
     // Just append to the table 
     $("table#bookmarks tr:first").after("<tr class='new' id='<?php echo rand(1, 9999); ?>'><td></td><td><b>URL:</b> <input type='text' id='newURL' /><br /><b>Title:</b> <input type='text' id='newTitle' /><br /><b>Description:</b><br /><textarea id='newDesc'></textarea></td><td><b>Tags:</b> <input type='text' id='newTags' /></td><td><a href='#' class='save'>Save</a><br /><a href='#' class='cancel'>Cancel</a></td></tr>"); 
     $('span#links').html('<i style="color: #FF0000">You must reload to recount links!</i>'); 
     // Actually, the user doesn't want to add another link 
     $('.cancel').click(function() { 
      $(this).parents(".new").animate({ backgroundColor: "#FF0000" }, "fast").animate({ opacity: "hide" }, "slow"); 
     }); 
     // Seems the user wants to add a link! 
     $('.save').click(function() { 
      $("table#bookmarks tr.new #id").animate({ backgroundColor: "#FFFFFF" }, "fast").animate({ opacity: "hide" }, "slow"); 
     }); 
    }); 

}); 

が、私は様々な方法のすべての種類を試してみましたが、.parent、.ATTRは、いくつかの名前を付けます。

Answer 1

このようなあなたのjQueryの関数を連鎖してみてください。

は

$(function() { 
    $(".add").click(function() { 
     $("<tr class='new'><td></td><td><b>URL:</b> <input type='text' id='newURL' /><br /><b>Title:</b> <input type='text' id='newTitle' /><br /><b>Description:</b><br /><textarea id='newDesc'></textarea></td><td><b>Tags:</b> <input type='text' id='newTags' /></td></tr>") 
      .append($("<td></td>") 
       .append($("<a href='#'>Save</a><br/>") 
        .click(function() { $(this).parents(".new").animate({ backgroundColor: "#FF0000" }, "fast").animate({ opacity: "hide" }, "slow"); })) 
       .append($("<a href='#'>Cancel</a>") 
        .click(function() { $(this).parents(".new").animate({ backgroundColor: "#FF0000" }, "fast").animate({ opacity: "hide" }, "slow"); }))) 
      .insertAfter($("table#bookmarks tr:first")); 
      $('span#links').html('<i style="color: #FF0000">You must reload to recount links!</i>'); 
    }); 
}); 

は（。それはまだ少し厄介ですので、これはあなたの元のコードの修正版です）

Answer 2

jQuery 1.3.2以降のjQueryライブを使用すると、動的に作成されたアイテムのクリック機能を保持できます。

http://docs.jquery.com/Events/live

Answer 3

私は一緒に投げ簡単な例ですが、私はjQuery上では錆びていると認めます。しかし、このコードは少なくとも私にとってはうまくいきます。

$(function() { 
$(".add").click(function(){ 
    var save = $("<a href='#' class='save'>Save</a>").click(function() { 
     $(this).parent().animate({ backgroundColor: "#FFFFFF" }, "fast").animate({ opacity: "hide" }, "slow") 
    }) 

    var cancel = $("<a href='#' class='cancel'>Cancel</a>").click(function() { 
     $(this).parent().animate({ backgroundColor: "#FFFFFF" }, "fast").animate({ opacity: "hide" }, "slow") 
    }) 

    var buttonTD = $("<td></td>"); 
    buttonTD.append(save); 
    buttonTD.append(cancel); 

    var row = $("<tr class='new' id='<?php echo rand(1, 9999); ?>'><td></td><td><b>URL:</b> <input type='text' id='newURL' /><br /><b>Title:</b> <input type='text' id='newTitle' /><br /><b>Description:</b><br /><textarea id='newDesc'></textarea></td><td><b>Tags:</b> <input type='text' id='newTags' /></td></tr>") 
    .append(buttonTD); 
}); 

}）;

Answer 4

jQueryのライブ機能：ここ

$("#sendmail").live("click", function(){ 

    // your code goes here 


}); 

は、私はそれを使用する方法の例です。 （#mytableのようなもの）に役立ちます

$("#cancel_row").live("click", function(){ 

    $(this).$("#mytable tr").hide(); 

}); 

希望

が最初にあなたのテーブルにIDを与える：

$("#sendmail").live("click", function(){ 

    $("#emailres").html('<img src="../images/ajax-loader.gif">'); 
    var youremail = $("#youremail").val(); 
    var subject = $("#subject").val(); 
    var message = $("#message").val(); 

    $.ajax({ 
    type: 'post', 
    url: 'email.php', 
    data: 'youremail=' + youremail + '&subject=' + subject + '&message=' + message, 

    success: function(results) { 
     $('#emailres').html(results); 
     } 
    }); // end ajax 

}); 

が選択された行を非表示にするには、このような何かを行います。