Why doesn't this Javascript work in IE

Question

I have a section of Html, where I have the user click a link (Delete) and the page then displays a 'Confirm Delete' button. When the 'Confirm Delete' button is clicked, JavaScript does an Ajax call to perform the delete. This works great in Chrome, but not in Internet Explorer (v11).

When debugging in Chrome, I can see the JavaScript called, but not in Internet Explorer.

The app is MVP. This is the rendered HTML:

<td>
    <a href="/project/edit">Edit</a> |
    <a href="/project/details">Details</a> |
    <a class="delete-link" href="javascript:void(0);">Delete</a>
    <div class="btn btn-primary delete-confirm" style="display: none;" data-delete-action="_submissionfiledelete" data-delete-controller="project" data-delete-id="b59fa83e-14a8-e511-8172-00215e466552">Confirm Delete</div>
</td>

And here's the javascript:

$(function () {

    $(Document).on("click",".delete-link",function (event) {
        var deleteLink = $(this);
        deleteLink.hide();
        var confirmButton = deleteLink.siblings(".delete-confirm");
        confirmButton.show();

        var cancelDelete = function () {
            removeEvents();
            showDeleteLink();
        };

        var deleteItem = function () {
            removeEvents();
            confirmButton.hide();
            var url = '/' + confirmButton.attr('data-delete-controller') + '/' + confirmButton.attr('data-delete-action') + '/' + confirmButton.attr('data-delete-id');
            $.post(
                url,
                AddAntiForgeryToken({ id: confirmButton.attr('data-delete-id') }))
               .done(function () {
                    var parentRow = deleteLink.closest(".removable-row"); //"tr:first, li:first");
                    parentRow.fadeOut('fast', function() {
                        parentRow.remove();
                    });
               }).fail(function (data) {
                    var bpData = data;
               });
            return false;
        };

        var removeEvents = function () {
            confirmButton.off("click", deleteItem);
            $(document).on("click", cancelDelete);
            $(document).off("keypress", onKeyPress);
        };

        var showDeleteLink = function () {
            confirmButton.hide();
            deleteLink.show();
        };

        var onKeyPress = function (e) {
            //Cancel if escape key pressed
            if (e.which == 27) {
                cancelDelete();
            }
        };

        confirmButton.on("click", deleteItem);
        $(document).on("click", cancelDelete);
        $(document).on("keypress", onKeyPress);

        return false;
    });

    AddAntiForgeryToken = function (data) {
        data.__RequestVerificationToken = $('input[name=__RequestVerificationToken]').val();
        return data;
    };
});

try `$(document)` instead of `$(Document)`. In general JS is case sensitive. — Sirko, Dec 21 '15 at 19:14
Do some minor debugging of said code and provide results in your question. — Kevin B, Dec 21 '15 at 19:17
Possible duplicate of [Error when using js in href ie 11](http://stackoverflow.com/questions/23077303/error-when-using-js-in-href-ie-11) — Matthew Herbst, Dec 21 '15 at 19:22

score 1 · Accepted Answer · answered Dec 21 '15 at 19:20

1

void will overwrite the onclick event in IE

change this line:

<a class="delete-link" href="javascript:void(0);">Delete</a>

to this:

<a class="delete-link" href="#">Delete</a>

You could try forcing Edge mode:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

answered Dec 21 '15 at 19:20

Jared

310
1
9

Just make sure to be aware of: http://stackoverflow.com/questions/134845/href-attribute-for-javascript-links-or-javascriptvoid0 – Matthew Herbst Dec 21 '15 at 19:22

Why doesn't this Javascript work in IE

1 Answers1