Nested data child?

nin_bound

I'm confused. I have an expandable/collapsible row that works. But now I want a nested expandable/collapsible inside it.

All content is loaded through ajax. When I try the code below, the code runs and gets the ajax, but no new tr dom is created.

            $(document).on('click', '#oTable tbody td:nth-child(1) button.nested-toggler', function () {
                var nTr = this.parentNode.parentNode;

                if ($(this).prop('style').backgroundImage === 'url("/images/closed.png")') {
                    // Open this row
                    var date = $(this).attr("date");
                    var zone = $(this).attr("zone");
                    var tid = $(this).attr("tid");
                    //var detailsLink = "schedules/oTabledate?date=" + date + "&zone=" + zone + "&tid=" + tid;
                    var detailsLink = "";
                    if (zone === "") {
                        detailsLink = "schedules/oTabledate?date=" + date + "&tid=" + tid;
                    }
                    else {
                        detailsLink = "schedules/oTablezone?date=" + date + "&zone=" + zone;
                    }

                    $(this).prop('style').backgroundImage = 'url("/images/open.png")';

                    $.get(detailsLink, function (data) {
                        oTable.row(nTr).child(data).show();
                    }
                    ).fail(function () {
                        if(zone === "")
                            alert("Failed to load details for " + date + ".  Please try again.");
                        else 
                            alert("Failed to load details for " + date + " on zone " + zone + ".  Please try again.");
                    });
                }
                else {
                    // This row is already open - close it
                    $(this).prop('style').backgroundImage = 'url("/images/closed.png")';
                    oTable.row(nTr).child.hide();
                }
            });