$matCheckbox.click() works only until I click somewhere with the mouse

Question

I have programmed some improvements for the Google AdWords interface in JavaScript/jQuery, which will be inserted into the html code via Greasemonkey. See: https://www.internet-marketing-inside.de/AdWords/usability-booster.html

Among other things, I improved the usability of the user interface by toggling checkboxes at the beginning of the row by clicking somewhere in the row or move the mouse and hold shift/ctrl. However, Google has developed a new interface that doesn't use normal checkboxes anymore and now I have a strange problem.

$matCheckbox.click(); works great until I clicked somewhere on the page once with the mouse. From then on .click() is ignored. Anybody have an idea?

$(document).on("mouseenter", ".particle-table-row", function(e){
 var $row = $(this);
 var $matCheckbox = $row.find("mat-checkbox");
 if (typeof($matCheckbox.attr("checked")) == "undefined") {
  if (e.shiftKey === true) {
   $matCheckbox.click();
  }
 } else {
  if (e.ctrlKey === true) {
   $matCheckbox.click();
  }
 }
});

mat-checkbox looks like angular.io but I'm not sure about that.

<mat-checkbox tabindex="0" indeterminate="false"><div class="particle-ripple-container" delegate-events="" style="pointer-events: none; width: 48px; height: 48px; transform: translate(-16px, -1px);"></div><div class="mat-checkbox-container" delegate-events="" style="border-color: rgb(117, 117, 117);"></div></mat-checkbox>

Thanks Holger

ilir aga · Answer 1 · 2018-08-11T18:57:46.777

Without much context & any way for me of testing my solution, here some assumptions.

Google uses its Angular framework (in a version above 2) for their new AdWords UI. Because Angular has a very complex way of managing the DOM-State internally (change detection etc), it's hard to interfere with it on that layer you're trying to access, from "outside". (Greasemonkey, Tampermonkey, etc).

I think that's why you're getting those strange effects.

One additional way which you could try, is to set only the attribute of the dom-element. Maybe this works, but you have to make sure that it triggers the 'click'-events of the AdWords UI properly (for example selecting the whole row or whatever)

$matCheckbox.attr('checked', !$matCheckbox.attr('checked') || false))

It uses the jquery method .attr to set the opposite of the current value (or false if none can be retrieved).

If this doesn't work you should maybe take a look at this.

In Addition I found this as well, but it's AngularJS (Angular 1) which works completely different internally than the recent versions.

$matCheckbox.click() works only until I click somewhere with the mouse

1 Answers1