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.
Related
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();
I'm trying to make a page horizontally and my problem is, and it starts from the end(DIVs are defined in right-to-left order, and it shows the one which is on the left)
I need a function to tell the browser to focus on the right div onload,so the user won't get confused.
thank you.
s.rb
By focus I assume you mean you want to scroll to the correct div on load.
if the div was defined like:
<div id="main"></div>
you can scroll to it in javascript with:
window.location.hash = '#main';
I hope this helps
You can do something like this
Set tabIndex to the element which you want to focus.
HTML
<div id = "iWillBFocused">
I will be focused on referesh
</div>
JS
document.getElementById('iWillBFocused').focus()
JSFIDDLE
Vanilla JS
There is a focus function that can be called on an html element:
document.querySelector('#myElement').focus();
You can read more about it on the Mozilla Documentation site.
jQuery
If you're using jQuery, you can also use the built-in jQuery focus() method:
$('#myElement').focus();
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
I'm trying to use a Firefox bookmarklet to fire an onclick event in an asp.net based web form, without physically clicking on the element. The URL of the page doesn't change no matter where I navigate on the site. Even if I could use document.getElementById("id").click(); that would be fine.
So far I have this code that I'm using in a bookmarklet
javascript: document.getElementById("ticket").click();
It doesn't work. I can get it to work on elements with link id's but not elements with td id's. To my understanding, it doesn't work since it's a td id I'm working with and not a button/input/link id.
Here's the element's code:
< td id="ticket" class="menu" nowrap="" align="center" onmouseout="this.className=this.className.replace(' highlighted', '')" onmouseover="this.className=this.className + ' highlighted'" onclick="menuClick('ticket', null, ''); ">
Any suggestions on how to fire a mouse click on that element (using a bookmarklet)?
Thanks in advance.
Works fine for me. Your problem may be the space between '<' and 'td'.
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.