Ausblenden einer dynamisch erstellten Tabellenzeile auf Klick

Question

Ich versuche zur Zeit eine dynamisch erstellte Tabellenzeile zu verstecken, nachdem eine Taste gedrückt wurde. Bisher habe ich geschafft, einen Teil der dynamischen Funktionen zu handhaben.

Jede dynamische Zeile ein „Abbrechen“ hat und „Speichern“, ich habe es geschafft, diese mit Leichtigkeit zu reagieren. Mein Problem ist tatsächlich arbeitet mit der Zeile selbst.

$(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 verstecken die Reihe, habe ich versucht, alle Arten von verschiedenen Methoden, .parent, .attr nur einige 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.)

Answer 2

Sie können mit jQuery leben, neu seit jQuery 1.3.2, die Klick-Funktion auf einem dynamisch erstellten Artikel erhalten.

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

Answer 3

Ich warf zusammen ein kurzes Beispiel, aber ich gebe zu, dass ich ein bisschen rostig auf jQuery bin. Dieser Code jedoch funktioniert, 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 verwendet wird.

$("#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 zu tun, wie folgt aus:

zuerst geben Sie Ihre Tabelle eine ID (so etwas wie #mytable)

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

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

});

Hoffnung, das Ihnen hilft.