클릭시 동적으로 생성 된 표 행 숨기기

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(); 

}); 

희망

먼저 테이블에게 자료 :

$("#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 

}); 

선택한 행을 숨기려면 같은 것을 할.