Develop Reference

How to simulate .click() on mobile

I need to click a div to do an action.
I do desktop version succesfully, but when I go to mobile, click action does not work. I try several ways that found here in Stack Overflow and other websites, but any works...
My code for desktop:
document.getElementById('BtMisDocumentos').click();
My code for mobile (3 attempts);
$('BtMisDocumentos').trigger('vclick');
$('BtMisDocumentos').trigger('tap');
$('BtMisDocumentos').trigger('touchstart');
Div;
<div id="BtMisDocumentos" class="dx-button dx-button-normal dx-button-mode-text dx-widget dx-button-has-text" onclick="void(0)" role="button" aria-label="Mis Documentos" style="width: 140px;"><div class="dx-button-content"><span class="dx-button-text">Mis Documentos</span></div></div>
Any idea? maybe does not work, because I am using a user agent, despite of a "real" mobile?

I think you are missing something:
//Use a . for a element class and # for a element id. Use it in the $('#...') part.
$('.BtMisDocumentos').trigger('vclick');
$('#BtMisDocumentos').trigger('tap');
$('.BtMisDocumentos').trigger('touchstart');
Try this with .click() aswell.
jQuery docs:
https://api.jquery.com/click/
EDIT #TWISTY:
If you want to just copy and paste:
//With a HTML class attribute. Example: <div class="BtMisDocumentos"></div>
$('.BtMisDocumentos').trigger('vclick');
$('.BtMisDocumentos').trigger('tap');
$('.BtMisDocumentos').trigger('touchstart');
$('.BtMisDocumentos').click();
//With a HTML id attribute. Example: <div id="BtMisDocumentos"></div>
$('#BtMisDocumentos').trigger('vclick');
$('#BtMisDocumentos').trigger('tap');
$('#BtMisDocumentos').trigger('touchstart');
$('#BtMisDocumentos').click();

When using jQuery versus JavaScript, you will use CSS Style Selectors.
$('#BtMisDocumentos').trigger('vclick');
$('#BtMisDocumentos').trigger('tap');
$('#BtMisDocumentos').trigger('touchstart');
For your code, the following should work still on Mobile:
$('#BtMisDocumentos').click();

selenium click not working on element with onclick="" and bound event listener

I am using Selenium driver to automatically display webpages from StackOverflow. I want all the comments to be displayed in the browser, so I have code to find the elements at the bottom of the comments lists that are like this:
<a class="js-show-link comments-link " title="expand to show all comments on this post" href="#" onclick="">show <b>7</b> more comments</a>
Once I locate this element, I try a .click() method on it, but nothing happens until about the third click.
(One more thing: after I posted the question, I realize that the .click() method works if I employ it after I manually click on the link, and I reload the page. This is strange. Maybe the page needs to be in the cache?)
This used to work fine a few months ago, but now there is an event listener (a little dark icon with the letters "ev" in it) right next to this element, and the onclick attribute is an empty string.
Would the event listening bind affect the behavior of .click()? Is there a solution? Thanks.
I am using selenium in Python 2.7. Here is my code:
link = u'http://stackoverflow.com/questions/549/the-definitive-guide-to-form-based-website-authentication'
from selenium.webdriver.common.desired_capabilities import DesiredCapabilities
firefox_capabilities = DesiredCapabilities.FIREFOX
firefox_capabilities['marionette'] = True
driver = webdriver.Firefox(capabilities=firefox_capabilities)
driver.get(link)
myelement = driver.find_element_by_css_selector('[title="expand to show all comments on this post"]')
myelement.click()

Why document.execCommand() only works in <img> tag?

This is my HTML code:
function formatDoc() {
document.execCommand('italic', false, null);
}
<div id="toolBar2">
<span onclick="formatDoc();">italic</span>
<img src="images/video.jpg" onclick="formatDoc();">
</div>
<div id="textBox" contenteditable="true"><p>Lorem ipsum</p></div>
The formatDoc() doesn't work in <span> tag, but works well in <img> tag.
why?
It also doesn't work in <p> tag and so on. So far I unsuccesfully tried to come to a solution by myselfy.
Who can tell me why this is happening? :(
Thanks everybody.

Ran into this issue as well, and found that setting the css property
user-select: none;
on the tag with the click handler to run execCommand fixed the problem.
Seems like the issue is due to the Selection object having the wrong item selected (the focus changes) when you click an HTML tag that can be selected.

This is from mozilla development network
When an HTML document has been switched to designMode, the document object exposes the execCommand method which allows one to run commands to manipulate the contents of the editable region. Most commands affect the document's selection (bold, italics, etc.), while others insert new elements (adding a link) or affect an entire line (indenting). When using contentEditable, calling execCommand() will affect the currently active editable element.
for more details have a look on it
https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

jQuery toggle not hiding visible element

I'm working on a Greasemonkey script, and I have roughly the following:
Javascript:
var togglingLink = document.createElement("a");
$(togglingLink)
.attr('href', 'somelink')
.html('<div>foo</div><div style="display:none">bar</div>');
$(togglingLink).children().toggle();
// Then I insert it into the page.
Which makes this HTML:
<a href="somelink">
<div>foo</div>
<div style="display:none">bar</div>
</a>
The $().toggle() is only making the hidden div visible, it's not hiding the visible div. What am I missing here?
James' jsfiddle does work. But the same code in my Greasemonkey script isn't working.
Per bobek's answer, I also tried changing the divs into spans, and that didn't fix it for me.

I finally figured this out. I was actually running $().toggle(); prior to appending the element to the page. This is what was causing jQuery to not toggle as expected. Once I made it the $().toggle(); happened after appending, then it worked properly.

Having a <div> inside <a> is not valid in HTML < 5 and some browsers might not be able to work with it. Change your <div> to <span> and see if it works then.

Click event not working on a div appended dynamically in IE

I am using jquery geocomplete plugin to show address suggestion when user type any address. It appends one div dynamically having class "pac-container". It looks like this :
<div class="pac-container">
<div class="pac-item"><b>SDG</b>, Vaishali, Bihar, India</div>
<div class="pac-item"><b>SDG</b>M, Kuber Nagar, Ahmedabad, Gujarat, India</div>
<div class="pac-item"><b>sdg</b>sdf, Isselburg, Germany</div>
<div class="pac-item">Lorong <b>Sdg</b> Kasim B Hamid Malacca Melaka Malaysia</div>
</div>
Now my problem is when I click on any of the pac-item I have to stop event bubbling. How can I attach the event handler on dynamically added pac-item for IE.
JS Fiddle : http://jsfiddle.net/EcPdP/2/
It is working fine for all browser except IE. In IE, clicking on pac-item is propagating that click event to body. Please help me to solve this.

try this:
$("#input-geo").geocomplete().bind("click",function(e){
e.stopPropagation();
e.preventDefault();
});
Which version of IE are you checking in?

I had similar problem for IE and later on narrowed down to IE10 only.
To solve try adding
background-image:url(/none)
to the div elements that are not displaying. For some reason it works even if a non-existing image is inserted, so I used that.
It turns out that due to the fact that the dynamically created div was made transparent using progid:DXImageTransform, IE didn't capture events for said div.
I don't remember where I got this solution from. If I fond original link, I'll update the answer.