title: How can I trigger the click event on a list element?
body: <p>In a 3rd party web app I want to trigger click on an element in a list with jQuery automatically like a physical mouse click.</p>
  
  <p>The list contains player data and these data are always different because its like an auction. Element classes are always named the same.</p>
  
  <p>Selected named: <code>class="listFUTItem has-auction-data selected"</code></p>
  
  <p>A non-selected element is named: <code>class="listFUTItem has-auction-data"</code></p>
  
  <p>The list is looking like this:</p>
  
  <p><a href="https://i.stack.imgur.com/4qO6z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4qO6z.png" alt="Transferlist click for full view"></a></p>
  
  <p>With MutationObserver I already edited the heights of an element and if the price is below average of my database its coloured in addition style like seen here:</p>
  
  <p><a href="https://i.stack.imgur.com/UMMjDm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UMMjDm.png" alt="Deal click for full view"></a></p>
  
  <p>Now I want to auto select a deal where the Elements class matches <code>'[style*="background-color"]'</code></p>
  
  <p>I also tried adding a selected class to the element but then the side panel wont have any affect on that.</p>
  
  <p>The trasnferlist HTML looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/HKKJP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HKKJP.png" alt="HTML view "></a></p>
  
  <p>with side panel I mean this event:</p>
  
  <p><a href="https://i.stack.imgur.com/7oKtN.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7oKtN.gif" alt="gif of UI"></a></p>
  
  <p>That's the MutationObserver Code with jQuery inside:</p>
  
  <pre><code>var observeTransferList = new MutationObserver(function (mutations) {
  mutations.forEach(function (mutation) {
      mutation.addedNodes.forEach(function (node) {
          if (node.nodeType === 1 &amp;&amp; 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 
                     //$(node).trigger('click'); //notworking
                     //$(node).trigger('click', ['selected']); // not working even when adding a selected class after page load and remove old selected
  
                  }
  </code></pre>
  
  <p>I tried a solution like:</p>
  
  <p><a href="https://stackoverflow.com/questions/11127908/difference-between-click-and-actually-clicking-a-button-javascript-jquery">Difference between .click() and actually clicking a button? (javascript/jQuery)</a></p>
  
  <p><a href="https://stackoverflow.com/questions/7632125/trigger-a-click-event-on-an-inner-element">Trigger a click event on an inner element</a></p>
  
  <p><a href="https://stackoverflow.com/questions/4819198/executing-a-click-function-without-the-user-clicking">executing a click function without the user clicking?</a>
  too</p>
  
  <p>Somehow I need to trigger the event of the listelement which changes the side panel. Somehow the virtual click has to trigger the events bound to a real mouse click. But what am I missed out?</p>