I have a problem on my website. I have a <div id="test"> which is display:none by default.
Now, when I click on the button it changes to display:block, but in my div a popup is displayed which disappears when I make a click.
So I need to simulate a click so that the another div does not show.
I tried :
<script>
document.getElementById('test').setAttribute('class','display-block');
document.getElementById('test').click();
</script>
But it does not work.
// element you click to execute the display
$('#button').on('click', function(){
$('#test').css('display','block');
});
Use jQuery .trigger()
http://api.jquery.com/trigger/
$('#test').trigger('click');
document.getElementById('test') returns a plain DOM node which doesn't do much. If you use $('#test') you will get the same DOM node, but wrapped in jQuery.
jQuery provides a .click() function on these "wrapped" nodes, which will simulate a click on the button for you:
$('#test').click();
(which is just a shortcut for .trigger('click') - read more here)
is the same as
$(document.getElementById('test')).click();
You can use jquery to do it:
$('#test').click()
or
$('#test').trigger("click");
Check the demo here: http://jsfiddle.net/eq9c2p2c/
update
You need to add click event, then you just trigger it.
This is the HTML:
<div id="test">click</div>
Javascript:
$('#test').click(function() {
$(this).addClass("border")
})
$('#test').click()
http://jsfiddle.net/eq9c2p2c/2/
Related
I tried method :
Attaching click event to a JQuery object not yet added to the DOM
but seems not working in my situation. After I created dom elements by jquery, the newly created elements are not accessible. What I want is to after clicking "click me" button, and the image will show up and I hope click the image and a div (#color-picker-box) to show up.
My code: https://codepen.io/MoMoWongHK/pen/ZXbWYb
add the number sign # when calling the id of your div,
from
$("myDiv").on("click" ,".color-picker-icon" , function(){
alert("hi");
$("#color-picker-box").removeClass("display-none");
});
to
$("#myDiv").on("click" ,".color-picker-icon" , function(){
alert("hi");
$("#color-picker-box").removeClass("display-none");
});
You just missed # while using myDiv as a selector!
Wrong:
$("myDiv").cl....
Corrected:
$("#myDiv").cl.....
You need to use event Delegation since the element is not added to dom yet. You need to capture the click on its parent.
$('#myDiv').on("click", "#color-picker-box", function(e){
console.log('color box clicked');
});
Read more about it on:
https://learn.jquery.com/events/event-delegation/
http://api.jquery.com/on/
I have a page where content is spread over several tabs. The user clicks each tab (anchor inside an <li>) in order to switch. I would like to anchor some other text to trigger the onClick of a tab in order to also switch the content.
Is this possible with javascript/jquery?
Yes. You can invoke a click event on another element using jQuery's .click();
Trigger tab click
Where #tablink is the ID of the tab you want to trigger.
More info: http://api.jquery.com/click/
You can achieve that with Jquery which is simple and easy to use. what you can actually do is that , you can attach a event eg., click to a event handler, which would do the stuff like loading appropriate content on to your current tab.
well this can be achieved by attaching the event to the event handler using a selector. .on() function is used as per the latest jquery lib although .click() also would work but its advisable to use .on() as it handles event delegation as well.
Example:
$( ".tab a" ).on( "click", function() {
// load the appropriate content to the current clicked tab
});
REF:
http://api.jquery.com/on/
Jsfiddle to play with :
http://jsfiddle.net/dreamweiver/h4JXs/1732/
Happy Coding :)
Here is my code below I'm trying to hide addstuff id div when clicked out of it. I tried body click event but it was useless. So I need a trigger event like blur. But It doesn't work for both blur and focusout events.
$(document).ready(function() {
$('#addstuff').blur(function () { $('#addstuff').fadeOut() })
})
There is no blur event for div. You can create that effect using the click event of body.Note that you should exclude that div from the click event
$(document).ready(function () {
$("body").not("#addstuff").click(function (e) {
$("#addstuff").fadeOut();
});
});
Fiddle
Edit
As #TrueBlueAussie suggested, it would be better to use document instead of 'body' for the click event handler:
$(document).not("#addstuff").click(function (e) {
$("#addstuff").fadeOut();
});
There's no way you can use .blur with a div, it has to be with some input field.
You can always use mouse events like
$(document).ready(function(){
$("#addstuff").mouseleave(function(){
$(this).remove();
});
});
http://jsfiddle.net/asrF2/
You can also use the HTML5 global attribute contenteditable (don't forget to set it true or false)
<div id="#addstuf" contenteditable="true">bla bla</div>
I don't recommend this that much, because of mobile browsers' compatibility.
divs have no focus and blur events, but you can add a contenteditable attribute so that you can type in that div, so the blur actually gets fired:
<div id="addstuff" contenteditable></div>
Then your jquery code works.
You can add additional functions to prevent people from actually typing in that div.
Alternatively you can use the .mouseleave() or .mouseout() event.
div element cannot be focused on so the blur function of jquery cannot be applied to it. See existing answers from our Stack Exchange buddies below for elements that focus can be applied on.
Which HTML elements can receive focus?
I want to initiate a plugin only if clicked on its parent element (because that element is being appended with jQuery so it does not exist when page loads), So I am trying following code:
$(document).on('click', '.wrap', function(){
ColorPicker(
document.getElementById('slider'),
document.getElementById('picker'),
function(hex, hsv, rgb) {
});
});
This works fine, but every time I click on the .wrap, it duplicates (please check the demo to see the problem). Is there anyway to fix it?
Demo:
http://jsfiddle.net/rhzzG/
(Click in the box to see the problem)
Thanks.
Rather than using on() to trigger this event every time the element is clicked, simply use jQuery's one() method to only fire it once:
$(document).one('click', '.wrap', function(){ ... });
ColorPicker will then take over from there with handling its own events.
JSFiddle demo.
You may use one instead
$(document).one('click', '.wrap', function(){
//...
});
I have a div that appears and disappears through the use of a jquery toggle. When yuo click a link the div appears or disappears.
Is there a way to make it so if javascript is disabled and a user clicks the link they are taken to a page instead?
Is there anything I should do when using a toggle to ensure it doesn't encounter problems?
Make the link take the user where you want them to go if js is disabled by default. Then use jQuery's preventDefault() on the click event (where you are probably defining your toggling behavior).
So the link should work on its own:
<a id="functioning-link" href="/js_disabled_page">Toggle my div</a>
Your jQuery should grab the click event to toggle your div, which will only work if jQuery/js is enabled:
$(function(){
$("#functioning-link").click(function(e){
e.preventDefault();
$("div").toggle();
});
});
You can use both href and onClick for this.
If the javascript is disabled, href fires up
else onClick!
For example:
Click to toggle
Javascript:
toggle = function() {
// Your code here
return false;
}