I have some links on my page and I need to programmatically perform a click on an element when the user clicks on another element. For example, when I click on element A, jQuery should perform a click on element A2.
I don't know what this is called, technically, and I'm having trouble finding out how to do this. Is this possible in jQuery?
Attached an event handler to your first element (#elementA in the example below) and then trigger a click event on the second element (#elementB below)
$("#elementA").on("click", function (e) {
$("#elementB").click();
});
Here is the Fiddle: http://jsfiddle.net/mifi79/Dar8J/
Use following to do trigger event,When div1 is clicked , Trigger click event for div2
$("#div1").click(function (){
$("#div2").trigger("click");
});
Working demo http://jsfiddle.net/MSSbT/
You can trigger a click via click()
http://api.jquery.com/click/#click
Related
I am using google translator which creates dynamically translator bar,it has show original button (click on below image link).
I want to fire click event of "show original" button manually using javascript or jquery but is is not working, see some of the code snippets that i tried.
$("#myBtn").click(function(){
$("#\\:1\\.restore").click();
//or
$("#\\:1\\.restore").on('click');
//or
$("#\\:1\\.restore").trigger('click',jQuery.Event( "click" ));
//or
document.getElementById(':1.restore').click();
})
imageURL: http://1drv.ms/1KhfLbo
The event on myBtn is not fired and your event handler is not working.
For dynamically added elements use event delegation.
$(document).on('click', '#myBtn', function() {
// Your Code Here
});
To trigger event:
$("#\\:1\\.restore").trigger('click');
You need delegate from a container such as document
$(document).on('click', '#\\:1\\.restore', function(){...}));
I want to fire click event of "show original" button manually
Use
$('#\\:1\\.restore').trigger('click')
or
$('#\\:1\\.restore').click();//with no parameters
I got the answer.
Actually translate bar was inside iframe tag, so we need to select iframe (container) then any element inside that.
$("#myBtn").click(function(){
$('#\\:1\\.container').contents().find('#\\:1\\.restore').click();
});
I'm trying to build some kind of element inspector (like in Chrome/FF).
Flow is as follows:
You click 'Start inspecting' button.
You hover over necessary element.
You click on that element.
You should see that element in console.
JSFiddle example
Here is the code:
startInspecting = function(){
$('section *').on('mouseover.INSPECTOR', function(e){
$('.hovered-element').removeClass('hovered-element');
$(e.target).addClass('hovered-element');
$(this).on('click.INSPECTOR', function(e){
$('section *').off('mouseover.INSPECTOR');
$('section *').off('click.INSPECTOR');
$('.hovered-element').removeClass("hovered-element");
console.log(e.target);
});
});
};
The problem is: each time I hover over some element - click event handler is attached to it. So if I hover over p element 5 times, and then click on it - I will see 5 console.logs instead of 1.
I tried to implement it using mouseenter/mouseleave, but faced the issue, that each element can be hovered only once - another JSFiddle example
So how can I improve my code that no matter how many times I hover over the element, it will have only one click handler?
Thanks in advance, any help will be appreciated!
Did you try moving the onclick handler outside the mouseover?
startInspecting = function(){
$('section *').on('mouseover.INSPECTOR', function(e){
$('.hovered-element').removeClass('hovered-element');
$(e.target).addClass('hovered-element');
}).on('click.INSPECTOR', function (e) {
$('section *').off('mouseover.INSPECTOR click.INSPECTOR');
console.log(e.target);
});
};
DEMO
I'd suggest breaking it up into parts. The user clicks on "Start Inspecting" and your page goes into inspecting mode where it adds css dynamically to every element that is hovered over so it looks similar to Chrome. When you click on an element in inspecting mode then you can handle it how you want. This way you only have to add one hover and one click handler per element, thus only triggering the event once.
I try to disable the binded click event in jquery, but I can found only to unbind or off the event click. If I do unbind() I can't get back those binded functions back.
For eg: I have a three div binded various function with click event. In some case I dont want particular div click event. So I try to disable that event only can't try to unbind() or off() the event. If I unbind() the event from div then again I need to bind those functions back to that div. See fiddle
Is there a way to disable the event and enable back those events without unbinding it.
Thanks in advance.
You can stop event like this:
function handler(e){
if(yourcondition)
e.preventDefault();
else {
}
}
You can give a class name to those div's. And call the click event though this class name like
$(".class_name").click(function(){ });
and when you want to disable the click event then use the id selector to remove the class
$("#div_id").removeClass("class_name");
and when you want to add the click event then then use the id selector to add the class
$("#div_id").addClass("class_name");
in this example
http://jsfiddle.net/prollygeek/WuNGJ/2/
you can remove class pointer from all elements so that no element will respond to any bound action , once you trun back the class , it will respond normally , class binding and unbining can be done by clicking div 1.
$(".element").on('click',function(){
if($(this).hasClass("triggered"))
{
$(".element").addClass('pointer');
$(this).removeClass("triggered");
}
else if($(this).hasClass("pointer"))
{
$(".pointer").removeClass("pointer");
$(this).addClass("triggered");
}
//do whatever
})
I have created divs with Click Event based on a value entered in a text box.
An Example Here
When you open the page and click any of the rows, you will get an alert. But when you change the value in the text box (Enter Number) and hit load button, then the rows will load based on the number entered.
Now when you click any rows, the click event does not work.....
Any Help in this regard is highly appreciated..........
You need the live function.
$(".schoolselect").live("click", function() {
See here: http://jsfiddle.net/27Z3t/
Your click handler for $('.schoolselect') is only attached once when the page loads. It is not a live jQuery event but that technique is deprecated in favour of the delegate model.
You can attach a delegate to $('#divHSSchoolResultTable') that will handle the clicks;
$('#divHSSchoolResultTable').delegate('.schoolselect', 'click', function() { alert(); });
See jQuery delegate for more details.
I have a gallery type of interface that I'm trying to get to work, I want to be able to click outside of it to close it, however there is a div inside that contains the main elements, photos, and things to click. However as it is now when you click inside the div it closes, because it's a child in the element that when you click it closes.
I have the divs like this:
<div class="theater-wrapper">
<div class="theater-container"></div>
</div>
everything is loaded into theater-container via ajax.
When you click .theater-wrapper it should fire the event to close, however when you click theater-container it shouldn't.
This is how I have tried to close it:
$(".theater-wrapper").click(function (event) {
$('.theater-wrapper').hide();
event.stopPropagation();
});
I have a jsfiddle showing this in action: http://jsfiddle.net/Cs8Kq/1/
If you want to stop propagation of the click event on .theater-container, then that's where you need to put the command. Right now you have it applied to the .theater-wrapper click action.
$(".theater-container").click(function (ev) {
ev.stopPropagation();
});