Manually trigger click event on other DOM element in knockout viewmodel page

In my html:

<input type="image" src="http://placehold.it/145x145" data-bind="click: imgClick"/>
<input type="file" id="artImage" style="display: none;" />

In my viewmodel:

var imgClick = function () {
    $("artImage").click();
};

If I put a debug breakpoint on the '$("artImage").click()' line, it is hit. I get no error in the console, nothing happens on screen though.

Seems to work ok in a fiddle? http://jsfiddle.net/nVrSP/ so I'm not sure why it's not working on my page.

(in case anyone asks, I'm trying to do a clickable image to trigger a file upload browse)

Answers


your selector is probally returning nothing as you have not given it a # to say "this is ID."

try

$("#artImage").trigger('click');

see this link for list of valid selectors: https://cdn.tutsplus.com/net/uploads/legacy/154_cheatsheet/jquery12_colorcharge.png


Dude, it is a security measure from the vast majority of browsers to do nothing on "click" event if the html file input control is hidden.

A workaround for this is to hide the file input control using opacity, do not hide it using visibility or display=none.

See this thread for more info:

In JavaScript can I make a "click" event fire programmatically for a file input element?


Need Your Help

render a individual field in a form-inline using 'as_crispy_field'

django django-crispy-forms django-filters

I need to render individual fields from my Form so I use the filter |as_crispy_field from crispy-forms and use bootstrap 3 for the style but I need to do it in a form-inline like the first example ...

Git Error: The requested URL returned error: 504 Gateway Timeout while accessing http://

git http-status-code-504

I am using a VM provisioned by my company's internal cloud (KVM) - RHEL 6.4.