Firing a manual click event on an button in ember.js doesn't give the required result

Question

TL;DR: Trying to fire a manual javascript click event on the chat button of twitch, won't send the message. Don't understand why the event doesn't do the same as a normal click and don't know how to make it work.

So I am trying to make a custom bot for twitch.tv, only reading his info from the HTML directly. I've got it perfectly working up to the point at where it can recognize commands and put text in the textbox. Now the problem I have is, as soon as I try to fire a manual click event on the "chat" button, it just doesn't seem to work. My guess is it has something to do with ember.js, and I frankly don't know anything about that. Anyway, here is the part of the code that doesn't work. EDIT: this works if I enter it as single in the console, doesn't work in context of the rest of my code though.

$('.send-chat-button').click();

What happens here is that I acquire a piece of html that contains the chat submit button, which is this:

<button class="button primary float-right send-chat-button" data-bindattr-3945="3945">
  <span>
    Chat
  </span>
</button>

When I try to manually fire a click event on this, nothing happens. However, when I fire a manual click event on buttonContain.children[0] and buttonContain.children1 (which are, respectively, the settings and list of viewers buttons), it does work. They look like this:

<a data-ember-action="3943" class="button glyph-only float-left" title="Chat Settings"></a>

I'm guessing the difference is in the data-ember-action and the data-bindattr-*, but I don't know how to make it work. Anyone here knows why the click() event doesn't work and directly clicking does?

EDIT: If you have any questions about my question, feel free to ask.

EDIT2: I experimented a little more, and I can remove all HTML attributes from the button, and clicking on it will still work. I have no idea what is going on :(.

EDIT3: Okay, so it seems it only stops working when i remove the Span within the button Still no idea what is going on. (Yes, have also tried to fire the click event on the span)

EDIT4: As requested, here is all the code from my side. Note that I'm trying to click a button from twitch itself, of which ember side I do not own any code. This code is used by pasting it in the console on a twitch.tv stream and then starting it by calling initiateMessageProcessing. I'm sorry for the lot of hardcoded values, those are twitch' fields that I need. For now I'm just looking for a proof of concept.

var frequency = 5000;
var myInterval = 0;
var lastMessageId = 0;

function initiateMessageProcessing() {
    if (myInterval > 0) {
        clearInterval(myInterval);
    }

    myInterval = setInterval("checkMessages()", frequency);
}

function checkMessages() {
    var chat = document.getElementsByClassName("chat-lines")[0];
    processMessages(extractUnprocessedMessages(chat.children));
    lastMessageId = parseInt(chat.lastElementChild.getAttribute("id").substring(5, 10));
}

function extractUnprocessedMessages(chat) {
    var unprocessedMessages = [];
    var chatId = 0;
    for ( i = 0; i < chat.length; i++) {
        chatId = parseInt(chat[i].getAttribute("id").substring(5, 10));
        if (chatId > lastMessageId) {
            unprocessedMessages.push(chat[i]);
        }
    }
    return unprocessedMessages;
}

function processMessages(unprocessedMessages) {
    var messageElement;
    for ( i = 0; i < unprocessedMessages.length; i++) {
        messageElement = unprocessedMessages[i].children[0].getElementsByClassName("message")[0];
        if (messageElement != undefined && messageElement != null) {
            if (messageElement.innerHTML.search("!test") !== -1) {
                sendMessage('Hello world!');
            }
        }
    }
}

function sendMessage(message) {
    fillTextArea(message);
    var button = $('.send-chat-button').get(0);
    var event = new MouseEvent('click', {
        bubbles : true
    });
    button.dispatchEvent(event);
}

function fillTextArea(message){
    var textArea;
    var chatInterface = document.getElementsByClassName("chat-interface")[0];
    var textAreaContain = chatInterface.children[0];
    textArea = textAreaContain.children[0].children[0];
    textArea.value = message;
}

EDIT5: Eventlistener screenshot:

EDIT6: Edited source code to use $('.send-chat-button').click(); I have tried this, does not work in the current code, it does work if I manually fire this single command in the console when there is text in the chat. But sadly does not work in my code.

EDIT7: used Ember.run, still doesn't work.

EDIT8: used dispatchmouseevent, still doesn't work in context of code

Answer 1

It seems that the target site attaches event listeners without help of JQuery. If it is so, you cannot trigger it using jquery .click() method.

You can try directly mocking the browser event like this:

var button = $('.send-chat-button').get(0);
var event = new MouseEvent('click', {bubbles: true});
button.dispatchEvent(event);

This code will not work in IE8 and lower, but I guess it is not your case.

Answer 2

I know this post is quite old but I had been looking for an answer on this for a while and nothing really worked, after trying out A LOT of stuff I found it works when you focus the chatbox first then focus the button then triggering the click event!!! uuuhm yeah...

$('.chat_text_input').focus();
$('.send-chat-button').focus().trigger('click');

I have no idea why this works (and why it doesn't in any other way), but leaving any of the focusses out makes it fail or bug out.