MutationsObserver click element / class

Question

I try to select an specific element at a transfermarketlist... Therefore i edited a specific class with specific values and deleted the current class "selected" from the first transfermarketlistobject. I added the selected class then to the specific element but its not wokring to ".click" the element. Need to simulate a real click to the object to get it work and show the object at the website

var observeTransferList = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        mutation.addedNodes.forEach(function (node) {
            if (node.nodeType === 1 && node.matches(".has-auction-data")) {
                $(node).css("height", "37");
                $(node).removeClass('selected');

                chrome.storage.sync.get(function (items) {
                    platform = items.platform;
                    percentage = items.percentage;
                    var playerData = getPlayerData(node, platform, percentage);


                    $(node).append(playerData);
                    if (playerData.colorPicked) {
                        $(node).css("backgroundColor", playerData.colorPicked); //can be "" by default, or green, yellow etc
                        //$(node).css("height", "37");
                        var price = Math.trunc(
                            parseInt(playerData.binValue.replace(/,/g, "")) / 0.949
                        );
                    }


       // -------- CODE HERE -----------//
                    if (node.matches('[style*="background-color"]')) { //works
                        $(node).css("height", "60"); //works
                        $(node).addClass('selected')//works
                        //$(node).click('selected'); // not working
                        //$(node).click(); // not working either


                    }

the transferobjectlist look like this:

If any questions just ask please :)

This is the solution if click() isnt working. Dispatches a touch event on the element. https://stackoverflow.com/a/42447620 — Red_Baron, Jun 16 '20 at 12:08

score 1 · Answer 1 · answered Apr 04 '20 at 02:26

1

Try using:

$(node).trigger('click');
$(node).trigger('click', ['selected']);

It's behavior is broadly consistent across all browsers. Refer this jquery doc for more details.

answered Apr 04 '20 at 02:26

Ashish Patel

442
3
8

apparenty not working. Either doing it at the "if matches" statement or with a single statement at the end of the code. Can a webapp block clicks? – Red_Baron Apr 04 '20 at 08:27
You may have another idea? – Red_Baron Apr 04 '20 at 19:50
Can you please verify in your code that the click event handler is attached to the node. When the element is asynchronously loaded on the screen or created after page load, such elements won't have event handlers attached to them. In which case, clicking on them doesn't do anything. – Ashish Patel Apr 05 '20 at 00:08
How can I verify that? Oh page load all elements get created first then the mutationobserver is doing its stuff – Red_Baron Apr 06 '20 at 17:03
In firefox, you can check if the proper event handler is attached to those node. Here is giphy snapshot showing how to view that. https://gph.is/g/a99mGB8 – Ashish Patel Apr 08 '20 at 06:38

MutationsObserver click element / class

1 Answers1