'Unable to programmatically click on <tr> or <td>

I'm working on a Firefox extension that streamlines ticket creation. I've run into a problem where I can't programmatically fire a click on a <tr> or <td>. I can navigate to the node successfully with Xpath or querySelectorAll but nothing happens when firing a click with .click(); or MouseEvent.

<div class="MenuOuter" armenuelementserial="0"
    style="z-index: 100015; left: 797px; width: 153px; height: 498px; top: 165px; visibility: inherit;">
    <div class="MenuScrollUp" style="background-image: url(&quot;../../../../resources/images/menu_up.gif&quot;); width: 151px; visibility: hidden;"></div>
    <div class="MenuTableContainer">
        <table class="MenuTable" style="width: 151px;" cellspacing="0" cellpadding="0">
            <tbody class="MenuTableBody">
                <tr class="MenuTableRow">
                    <td class="MenuEntryName" nowrap="">ATM Switched</td>
                    <td class="MenuEntryNoSub" arvalue="ATM Switched"></td>
                </tr>
                <tr class="MenuTableRow">
                    <td class="MenuEntryName" nowrap="">Customer Service</td>
                    <td class="MenuEntryNoSub" arvalue="Customer Service"></td>
                </tr>
                <tr class="MenuTableRow">
                    <td class="MenuEntryName" nowrap="">DNS/Email Order Coordination</td>
                    <td class="MenuEntryNoSub" arvalue="DNS/Email Order Coordination"></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="MenuScrollDown" style="background-image: url(&quot;../../../../resources/image/menu_down.gif&quot;); width: 151px; visibility: hidden;"></div>
</div>
//XPATH
document.evaluate("//td\[text()='ATM Switched'\]", document.body, null, 9, null).singleNodeValue.click();

//querySelector
document.querySelectorAll('.MenuOuter tr')[0].click();

//mouseEvent
var mEvt = new MouseEvent("click", { bubbles: true, cancelable: true, view: window });  
var ele = document.querySelectorAll('.MenuOuter tr')[0];
ele.dispatchEvent(mEvt);
//mousedown/mouseup
var mDn = new MouseEvent("mousedown", { bubbles: true, cancelable: true, view: window }); 
var mUp = new MouseEvent("mouseup", { bubbles: true, cancelable: true, view: window });

var ele = document.querySelectorAll('.MenuOuter tr')[0].querySelectorAll('td')[0];
ele.dispatchEvent(mDn);
ele.dispatchEvent(mUp);


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source