How do I fateOut dynamically created table rows?

See more:

Javascript

jQuery

Hi,

I am using SignalR to send notifications to clients and using jQuery to create a notification message. Here is a dump of all the javascript involved so you can clearly see what I am doing. I have included a commented out prototype in case you want to try the code yourself without setting up SignalR events:

<script type="text/javascript">
   $(function () {
        var connection = $.connection.subscriptionsHub,
            $notesTable = $('#NotesTable'),
            $notesTableBody = $notesTable.find('tbody'),
            $rowTemplate = '<tr id="{ID}" url="{Url}"><td><img src="/Resources/images/{Severity}.jpg" /></td><td>{Item}</td><td>{Info}</td><td>{Time}</td><td class="close">x</td></tr>';

        function severityNumerator(severity) {
            if (isNaN(severity)) {
                switch (severity.toLowerCase) {
                case "warning":
                    return 1;
                case "danger":
                    return 2;
                case "question":
                    return 3;
                case "info":
                    return 4;
                default:
                    return 4;
                }
            } else return severity;
        }
        function formatData(fdata) {
            return $.extend(fdata, {
                ID: fdata.Guid,
                Item: fdata.ItemType,
                Info: fdata.Information,
                Time: fdata.NoteTime,
                Severity: severityNumerator(fdata.Severity),
                Url: fdata.ItemUrl
            });
        }

        function setRowBindings() {

            var table = $("table[id='NotesTable']");

            $(table).on('click', 'tr>td:not(.close)', function() {
                var row = $(this).parent();
                var url = $(row).attr('url');
                window.location.href = url;
            });
            $(table).on('click', 'tr>td.close', function() {
                var row = $(this).parent();
                $(row).hide();
                $notesTableBody.remove($(row));

            });
        }

        $.extend(connection.client, {
            newNotification: function (notification) {
                var ndata = formatData(notification);
                var $row = $rowTemplate.supplant(ndata);
                $notesTableBody.append($row);
                setRowBindings($row);
            }
        });

        setRowBindings();

        $.connection.hub.start();

        //function data(guid, itemType, info, time, severity, url) {
        //    this.Guid = guid;
        //    this.ItemType = itemType;
        //    this.Info = info;
        //    this.Time = time;
        //    this.Severity = severity;
        //    this.Url = url;
        //}

     });

</script>

<div class="subscribtions-notifier visible col-md-4">
    <table id="NotesTable">
        <tbody>
        </tbody>
    </table>
</div>
</pre>

I don't like that I have to set up the row events on the table, but that fixed the 'click' event issue.

Now my problem is that I want each notification message to fadeOut after 5 seconds. I will have a table.hover event to reset the fadeOut timer but that's not the issue. How can I get each row to fadeOut 5 seconds after it's been created?

If the rows were not dynamic, I would do this after adding the table:

$(row).stop().delay(5000).fadeOut();
       $(row).hover(
           function () {
               $(row).stop(true, true).fadeIn();
           },
           function () {
               $(row).stop(true, true).delay(5000).fadeOut();
           });

Any help is appreciated
Thanks