New Post: Troublesome eventlistener in spservices generated table

Hi!

I'm having a bit of a problem with a table generated from a list using spservices.

What I want to do is to display a button to delete each item next to the title of the item. The list only contains the items created by the user.

This is what I've created so far:

<script language="javascript" type="text/javascript">
SP.SOD.registerSod('SPServices', "/kurskatalog/_catalogs/masterpage/script/SPServices/jquery.SPServices-2013.01.min.js");

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {console.log("loaded required js");});
SP.SOD.executeFunc('SPServices', null, function () {console.log("loaded SPservices");});

ExecuteOrDelayUntilScriptLoaded(function(){
function kursAvmelding(kID) {
    console.log("kID = " + kID);
}
console.log("Populating table...");
var thisUserAccount = $().SPServices.SPGetCurrentUser({
    fieldName: "Title",
    debug: false
    });
$().SPServices({
        operation: "GetListItems",
        async: false,
        webURL: "/sites/kursredaktor/",
        listName: "{CCB8060E-5157-49FD-B438-6B45AC4F3013}",
        CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='Kurs_x0020_Dato' /><FieldRef Name='Author' /></ViewFields>",
        CAMLQuery: "<Query><Where><Eq><FieldRef Name='Author'></FieldRef><Value Type='Text'>" + thisUserAccount + "</Value></Eq></Where></Query>",
        completefunc: function (xData, Status) {
            console.dir($(xData.responseXML).html());
            var counter = 1;
            $(xData.responseXML).SPFilterNode("z:row").each(function() {
                var sletteid = "sletteid" + counter;
                var tdHtml = "<tr><td>" + $(this).attr("ows_Title") + "<td>" + $(this).attr("ows_Kurs_x0020_Dato") + "</td><td><a id='" + sletteid + "' href='#'><img src='/_layouts/15/images/CNSREJ16.GIF'></a></td></tr>";
                $("#tbody_id").append(tdHtml);
                document.getElementById(sletteid).addEventListener("click", kursAvmelding($(this).attr("ows_ID")), false);
                counter++;
                });
        }
});
console.log("Done!");
}, "sp.js");

</script>

<table id="table_id">
    <thead>
        <tr>
            <th>Kurs</th>
            <th>Dato</th>
            <th>Avmelding</th>
        </tr>
    </thead>
    <tbody id="tbody_id">
    </tbody>
</table>

I also have the delete funciton ready, but I have an obstacle that prevents me from getting that far - the delete function gets called upon rendering of the table :(

This is a screenshot from firebug:


Now, I'm not sure if this issue is related to SPServices, SharePoint, JavaScript or divine intervention, but I'm pretty sure an eventlistener is supposed to wait for the event to occir before running the function... right..?

In any case, I appreciate all feedback.