Assigning Click Event After Altering innerHTML


#1

Using angular-meteor

Essentially, I have a ng-click event on a which calls a function that clones the and places it elsewhere. I changed some of the innerHTML so that there is a ‘x’ icon for removing the item. I would like to be able to click that new to remove it.

So, I know that setting an attribute of ng-click does not work. I am stuck on how I can make this happen.

my template addClass.html

<tr id="{{$index}}" ng-repeat="class in $ctrl.classes" ng-click="$ctrl.addThisClass($event)">
    <td><span class="badge pull-left">{{class.units}}</span>&nbsp; {{class.name}}</td>
    <td>{{class.number}}</td>
    <td>{{class.teacher}}<span class="glyphicon glyphicon-plus text-danger pull-right"></span></td>
</tr>

the function it calls

addThisClass = function($event) {
    var clone, table, tableBody, tableRow, tableRowLength, cmpTableData, tableData, tableDataText, remove, alert, footer;
    clone = $event.currentTarget.cloneNode(true);
    table = document.getElementById('queuedClasses');
    tableBody = table.getElementsByTagName('tbody')[0];
    tableRow = tableBody.getElementsByTagName('tr');
    tableRowLength = tableBody.getElementsByTagName('tr').length;
    tableData = clone.getElementsByTagName('td');
    footer = document.getElementById("modalFooter");
    tableDataText = tableData[2].textContent;
    if (tableRowLength < 7) {
        for (var i = 0; i < tableRowLength; i++) {
            if (tableRow[i].getElementsByTagName('td')[1].textContent == tableData[1].textContent) {
                if (footer.getElementsByClassName('alert').length === 0) {
                    alert = document.createElement('div');
                    alert.className = 'alert alert-danger text-left';
                    alert.id = 'alertMessage';
                    alert.setAttribute('role', 'alert');
                    alert.appendChild(document.createTextNode('Sorry, you already added that class to the queue.'));
                    footer.insertBefore(alert, footer.childNodes[0]);
                    setTimeout(function() {
                        $("#alertMessage").fadeTo(500, 0).slideUp(500, function() {
                            $(this).remove();
                        });
                    }, 3000);
                }
                return;
            }
        }
        remove = '<span class="glyphicon glyphicon-remove text-danger pull-right" style="padding-top: 2px; !important;" title="Delete Class"></span>';
        tableData[2].innerHTML = tableDataText + remove;
        tableBody.appendChild(clone);
    } else {
        if (footer.getElementsByClassName('alert').length === 0) {
            alert = document.createElement('div');
            alert.className = 'alert alert-danger text-left';
            alert.id = 'alertMessage';
            alert.setAttribute('role', 'alert');
            alert.appendChild(document.createTextNode('You cannot have more than 7 classes queued.'));
            footer.insertBefore(alert, footer.childNodes[0]);
            setTimeout(function() {
                $("#alertMessage").fadeTo(500, 0).slideUp(500, function() {
                    $(this).remove();

                });
            }, 3000);
        }
    }
    /* Reset Filter */
    var input, filterTable, filterTR;
    input = document.getElementById("searchForClasses");
    input.value = '';
    filterTable = document.getElementById("tableClasses");
    filterTR = filterTable.getElementsByTagName("tr");
    for (i = 0; i < filterTR.length; i++) {
        filterTR[i].style.display = "";
    }
}