What Can Cause Click() Method To Fail?

I have an element (a checkbox), with this HTML:

Solution 1:

If the question is:

What can cause click() method to fail?

Then the Answer is: Kinda NOTHING! If the click-method is available for an HTMLElement then calling HTMLElement.click() can not "fail" (in that sense). What could happen is that calling click on this element will not have the desired effect/impact - which is the case for the questions author! "just for the sake of completeness..."

---

After deeper investigation, here is my conclusion.

1. The actual event handlers that are responsible for checking and unchecking (and all that is related to it) are callbacks "listen to" mousedown-events on these button._f_V1.noMargin.o365button-elements (boot.worldwide.0.mouse.js:37); so you will not get anywhere triggering click-events. One may ask: "how can you say so?". I can say so because I removed ALL other event listeners first traversing up two parents and then from there on all the way down with each and every child element except for the button where I left the mousedown-eventListener. And the functionality was still intact. After removing also this last event listener the functionality was gone. So I guess: yep I can say so :)

2. My next step was to trigger a mousedown-event on the button like this:

   $('._f_V1.noMargin.o365button').each(function() {
       $(this).mousedown();
   })
   

   But NO this doesn't work.

3. So what about hysterically triggering events on every maybe-relevant element like this:

   var $El = $('._f_V1.noMargin.o365button').parent().parent();
   $El.add( $El.find('*') ).each(function() {
       $(this).mousedown().mouseup().click();
       // may be one event is cancelling the result of another one out// so I also tried $(this).mousedown()
   });
   

   NO - this also doesn't work.

4. So I came up with my last approach which didn't work either. Let’s mimic the attributes and properties from selected button. BTW the element that is actually responsible for making the "pseudo checkbox" look like checked/unchecked is the first span-childNode of the button-element. So if you type in the following code in the console of your browsers devtool everything will look exactly as it was properly clicked (or mousedowned so to say):

   $('._f_V1.noMargin.o365button').each(function() {
       $(this).trigger('mousedown').addClass('_f_V1 noMargin o365button _f_W1').attr('aria-checked', 'true').prop('aria-checked', true)
           .children(':first').trigger('mousedown').addClass('_fc_3 owaimg ms-Icon--check wf-size-checkboxMultiselectSize ms-bgc-w ms-fcl-nsa-b ms-fcl-ns-b ms-border-color-neutralSecondaryAlt')
               .parent().parent().parent().trigger('mousedown').attr('aria-selected', 'true').prop('aria-selected', true)
   })
   

   See the screen capture below where I pastet the above snippet straight into devtools console and the "pseudo checkbox" appear as they where clicked.

   

So what to do now? Ask another question! One that is much more specific. Something like: "How to [recover|deepDelete] all deleted messages in hotmail.com" Because this is what the intent of the question actually is - not sure about it but I guess.

---

Just want to emphasize this once more: In general the code from OP and also the code in this answer works. It does right, so to say. But it’s not able to achieve what the author wants to achieve.

---

Additionally here is a proof that the OPs code is actually working:

document.querySelector('._f_V1.noMargin.o365button').addEventListener(
  'click', function() { console.log('jepp') }
);

document.querySelector('._f_V1.noMargin.o365button').click();
// BTW: yep HTMLElement.click() returns undefinedconsole.log(
  'yep HTMLElement.click() returns: ',
  document.querySelector('._f_V1.noMargin.o365button').click()
)

button {width: 100%; height: 100%; position: fixed}

<buttontype="button"class="_f_V1 noMargin o365button"aria-labelledby="_ariaId_28"role="checkbox"aria-checked="false"><spanclass="_fc_3 owaimg checkboxImage wf-size-checkboxMultiselectSize ms-bg-color-white ms-border-color-neutralSecondaryAlt"></span><spanclass="_fc_4 o365buttonLabel _fc_2"id="_ariaId_28"style="display: none;"></span></button>

Solution 2:

function handelClick(){
  if(this.getAttribute("aria-checked")=="true"){
   this.setAttribute("aria-checked", "false");
  }else{
  this.setAttribute("aria-checked", "true");
 }
}
var button=document.getElementsByTagName('button');

for (var i = 0; i < button.length; i++) {
 button[i].addEventListener('click', handelClick);}

 goto https://jsfiddle.net/7xnwpgbk/5/
 it may help you

Solution 3:

You can try it with jQuery click method which will only work on jQuery collections created like:

jQuery( 'your whatever selector(s) here' ) // form here on you can call .click() now

So for your specific approach you can do:

jQuery('._f_V1.noMargin.o365button').click();

as well as:

jQuery('button span').click();

---

Since jQuery click method does only trigger an on click event on the first DOM element of a jQuery collection you can combine it with jQuery method each as follows:

jQuery('._f_V1.noMargin.o365button').each(function() {
    $(this).click();
});

as well as:

jQuery('button span').each(function() {
    $(this).click();
});