Can't programmatically trigger click on switch widget


In a iOS mobile app we need to trigger toggle of a switch widget. I've bonded on click event to specific container on screen and on browser all is working fine but not on device. However if I copy paste code to console when debugging app via Safari it works fine. So I'm a bit lost figuring out what prevents this code from performing its purpose? 

$(".toggleWrapper[data-id="+$"] .mytoggleInputClass").trigger("click");

there is no Js errors or warnings. I've used console.log(); to see if id is sent correctly and it is.

where id is an input parameter so we can select 1 element on the screen. I've tried onClick and onTouchEnd events but same result.

Actual purpose is to make clickable are go toggle widget bigger without changing actual toggle size.

I think there may be some typos above, so to clarify, the goal is to make the clickable area of your toggle widget larger, while keeping the widget the same size.

Is that correct?

So it's not that you are trying to toggle it programmatically so much as you want the container to trigger the event, not just the widget itself?

Yes, idea is to have another container trigger same event as when clicking on the widget. Code example do it if it is run on the Safari console while having iPad connected. code is triggered on device when clicking on the container as I can see log messages on the console. However widget click event is not fired. 

So to clarify picture:
- we have toggle widget with attached onChange event

- we have another container on screen (wrapper of the toggle widget) that have action attached to onClick event where JS node runs $(".toggleWrapper[data-id=123] .mytoggleInputClass").trigger("click"); console.log("container clicked");  where 123 is data-id attribute of the container wrapper around toggle widget.

while having iPad connected and accesses via Safari dev tools - on console we see "container clicked" messages -  each time respective container is tapped. Toggle is not changed and attached to it action is not triggered.

- if copy/paste above mentioned JS code in the console with proper id hardcoded toggle widget changes and all is workings expected. 

Problem solved by changing the checkbox instead of triggering click event.

if ($(".toggleWrapper[data-task-id="+$"] .bigtoggle").prop("checked")){
    $(".toggleWrapper[data-task-id="+$"] .bigtoggle").prop("checked",false);
    $(".toggleWrapper[data-task-id="+$"] .bigtoggle").prop("checked",true);

Also wanted to mention that changing checkbox state (toggle switch) doesn't trigger respective "OnChange" event nor updates value of associated variable. Solution is to have action that toggles checks, sets variable manually and calls associated "onChange" action.