Eine dynamisch erstellte Tabellenzeile bei Klick ausblenden

Question

Ich versuche gerade, eine dynamisch erstellte Tabellenzeile auszublenden, nachdem eine Schaltfläche gedrückt wurde. Bisher habe ich es geschafft, einen Teil der dynamischen Funktionen zu bewältigen.

Jede dynamische Reihe hat eine "Abbrechen" und "Speichern" Taste, ich habe es geschafft, auf diese mit Leichtigkeit zu reagieren. Mein Problem ist es, mit der Zeile selbst zu arbeiten.

$(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"); 
     }); 
    }); 

}); 

Ich muss jetzt die Reihe verstecken, ich habe alle möglichen verschiedenen Methoden versucht, .parent, .attr ein paar zu nennen.

Answer 1

Versuchen Sie, Ihre jQuery-Funktionen wie das Verkettungs:

$(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>'); 
    }); 
}); 

(. Dies ist eine modifizierte Version des Original-Code, so dass es immer noch ein bisschen chaotisch ist)

Answer 2

Sie können jQuery live, neu seit jQuery 1.3.2, verwenden, um die Klickfunktion für ein dynamisch erstelltes Element beizubehalten.

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

Answer 3

ich zusammen warf ein schnelles Beispiel, aber ich gebe zu, ich bin ein bisschen rostig auf jQuery. Dieser Code funktioniert jedoch, zumindest für mich.

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

Die jQuery Live-Funktion:

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

    // your code goes here 


}); 

hier ist ein Beispiel dafür, wie ich es benutzen.

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

}); 

die ausgewählte Zeile auszublenden, etwas tun, wie folgt aus:

ersten Tisch eine ID (so etwas wie #mytable) geben

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

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

}); 

Hoffnung, das Ihnen hilft.