title: Clicking a button with Node + PhantomJS
body: <p>I'm using Node + PhantomJS-Node to do some dynamic website crawling. The first page is opened, a link is obtained and then a second page is opened. On the second page there is a button that initiates a search which I'm having trouble clicking. </p>
  
  <p>Initially I tried using jQuery.click() on the button element but when the screenshot was taken it didn't seem to have been clicked as the image on the page was not updated. I followed the <a href="https://stackoverflow.com/questions/15739263/phantomjs-click-an-element">solution here</a> which is what I have implemented below but the screenshot outputted from the code below suggests that the button was not clicked.</p>
  
  <pre><code>phantom.create(function (ph) {
      ph.createPage(function (page) {
          page.open("www.mysamplepage.com", function (status) {
              page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() {
  
                  page.evaluate(function () {
                      return $('div.Div5 a').attr('href');
                  }, function (link) {
                      page.open(link, function(status) {
                          page.evaluate(function() {
  
                              var element = document.getElementById('mybutton');
                              var ev = document.createEvent("MouseEvent");
                              ev.initMouseEvent(
                                  "click",
                                  true /* bubble */, true /* cancelable */,
                                  window, null,
                                  0, 0, 0, 0, /* coordinates */
                                  false, false, false, false, /* modifier keys */
                                  0 /*left*/, null
                              );
                              element.dispatchEvent(ev);
  
                          }, function() {
                              setTimeout(function() {
                                  console.log('status = ' + status);
                                  page.render('page.png');
                                  ph.exit();
                              }, 30000);
                          });
  
  
                      });
                  });
              });
          });
      });
  });
  </code></pre>
  
  <p>I'm not sure if it's related but when I executed the code that programmatically clicks the button in a Chrome browser, it's only fired once and subsequent execution of the code isn't fired.</p>
  
  <pre><code>var ev = document.createEvent("MouseEvent");
  ev.initMouseEvent(
      "click",
      true /* bubble */, true /* cancelable */,
      window, null,
      0, 0, 0, 0, /* coordinates */
      false, false, false, false, /* modifier keys */
      0 /*left*/, null
  );
  
  document.getElementById('btnAddressSearch').dispatchEvent(ev); // Executed
  document.getElementById('btnAddressSearch').dispatchEvent(ev); // Not executed
  document.getElementById('btnAddressSearch').dispatchEvent(ev); // Not executed
  </code></pre>