'undefined' is not a function evaluating el.click() in Safari

Question

I would like to run a js function on pressing Enter button. Everything works great in IE, Chrome and Opera, but I get an error (explained below) in Safari.

I need a

Answer 1

I came across this same issue while working on a similar problem. What I came up with is the following for triggering click events in safari(as well as other browsers, of course):

var t = document.getElementById('someidhere');
if (document.dispatchEvent) {
    var e = new MouseEvent('click', {
        view: window,    // Window associated with the event
        bubbles: true,
        cancelable: true
    });
    t.dispatchEvent(e);
} else if (document.fireEvent) {
    t.fireEvent('onclick');
} else if (t.click) {
    t.click();
}

According to @Dennis, your code already works for Firefox, however this code should work in Firefox anyway as of version 79.0(the version it was tested in).

Note that initEvent() has been deprecated. The new method of creating the event through the Event constructor doesn't work in Internet Explorer, however.

Answer 2

You're triggering a click event on a divwhich would have no implicit click handler.

Answer 3

getElementById('enterSearch')

should be document.getElementById('enterSearch')

Answer 4

A div element has no click event handler defined per default. So, first you need to apply a click event for the enterSearch div, e.g. <div id="enterSearch" onclick="submitSearch()">Search</div>. Otherwise the button itself won't be clickable.

To execute an event programmatically, use this construct:

function pressSearch(e) {
    if (typeof e == 'undefined' && window.event) {
        e = window.event;
    }

    var charCode = (e.which) ? e.which : ((e.charCode) ? e.charCode : ((e.keyCode) ? e.keyCode : 0));
    if (charCode == 13) {
        var a = document.getElementById('enterSearch');

        if (typeof a.onclick == "function") {
            a.onclick.apply(a); // binds the scope of onclick to a
        }
    }
}

I could not validate this for IE, but it works with Safari.

Answer 5

If you take a look at the HTML DOM Level 2 Specification, the click() function is only defined for HTMLInputElement, so while certainly not very user-friendly Safari doesn't need to implement that.

The correct way to trigger an event for modern browsers is in DOM Level 3 Events:

// First create an event
var click_ev = document.createEvent("MouseEvents");
// initialize the event
click_ev.initEvent("click", true /* bubble */, true /* cancelable */);
// trigger the event
document.getElementById("someElement").dispatchEvent(click_ev);

Here's jsfiddle that works in Chrome, Safari, Firefox and IE9: http://jsfiddle.net/y5yW9/6/