Develop Reference

click event is not working for dynamically created button

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();
});

When user clicks on one element, trigger a click on another.

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

How to trigger change event for Chosen (jQuery)

Before I click reset button I choose "Company" in Chosen (dropdown list). The event occurs normally after I click reset. I choose "Company" again but event change in dropdownlist doesn't occur.
Could anyone tell me how to trigger the change event for dropdownlist after clicking reset button and then the same element?
The code I have so far:
$("#mainMenu").change(function(e){
e.preventDefault();
loadFirstManu(true);
});
Code for the reset button:
$("#btn_reset").click(function() {
CKEDITOR.instances.ckeditor.setData('');
$('.mchosen').each(function() {
$(this).val('').trigger('liszt:updated');
$('#submenu').attr('disabled', 'disabled').html('');
$('#secondsubmenu').attr('disabled', 'disabled').html('');
$('#s-menu').removeClass('required').html('');
$('#secondsubmenu').removeClass('validate[required]');
$('#tabmenu').attr('disabled', 'disabled').html('');
$('#tab').removeClass('required').html('');
});
});

This is what i figured out:
$('#my-select').val(5).trigger("liszt:updated")
liszt:updated is no longer working in new version of chosen instead use below as Alexandru Cojan's answer suggesting
trigger("chosen:updated");

for newer version of chosen the event is "chosen:updated"
$(selector).trigger("chosen:updated")

If i need just to refresh value in chosen select - .trigger('chosen:updated') is enough. But if I have change handler and want it to be called - i need to do .trigger('chosen:updated').change()

I don't know if this is your case or not, but your code above should work,
$("#mainMenu").change(function(e){
e.preventDefault();
loadFirstManu(true);
});
but please notice that "change" event occurs on most browsers when you unfocus the select input
So when you click reset, just before executing the reset action the onchange is triggered.
Now try clicking outside the select input after changing the selection and see if it still works or not

Maybe you should try using .on, as your $('#mainMenu') may have changed somewhere (Can't say without an example). Try doing this:
$("body").on('change','#mainMenu',function(){
...
});
or any parent selector instead of "heavy" body

If I am not wrong to understand you then you want to trigger the event change after click on the reset button.
you can do this by simply adding one line to your code
//code
$("#btn_reset").click(function(){
// your code here
$("#mainMenu").trigger('change');
//you can write this as per your requirements ie. at start or end.
});

jQuery child activating parent click event

I'm having issues preventing a child element from activating a parent click event in jQuery. I've Google'd around and have stumbled upon a couple different solutions, none of which appear to work for me.
I need to make a table cell editable after clicking it so that I can submit the edited text asynchronously via ajax. I'm using jQuery to replace the text with an input field but it then can't be edited or submitted because each click fires the parent event again.
I've tried using:
$("child").click(function(e){
e.stopPropagation();
})
And also .unbind("click") on the parent as once it's been clicked it won't need to be clicked again but this seems to unbind the child too.
I've prepared a fiddle in order to properly show the problem.
Any help at all would be super! It's driving me crazy.

The problem is because the .btn-comment element is being dynamically appended, so you need a delegated handler. Try this:
$(".td-edit").on('click', '.btn-comment', function(e) {
e.stopPropagation();
});
Updated fiddle
Note in the fiddle - you can see the event is not being propagated because the alert() does not fire when clicking the button element.

A couple things here.
Everytime you click onto the table cell, you're regenerating the form elements. This includes not only the click on the cell to switch the contents to the edit control, but also when you click onto the textfield to focus on it to perform text changes
The click for your button, will never fire, as it's being bound BEFORE the control exists in the dom.
My suggestion would be to have the controls already exist on the page, but have the clicking of the element be for controlling the VISIBLITY of the textbox. Additionally, put the text to be clicked into a span or label or div, and click on it that way, as opposed to the actual cell.
$("#td-edit").click(function() {
$("#td-edit").hide();
$("#dvEdit").show();
});
$("#btn-comment").click(function(e) {
$("#td-edit").show();
$("#dvEdit").hide();
});
Updated fiddle

I've updated your fiddle and it seems to work with what I created. Putting it here as well for reference:
function clickEdit() {
$(this).html("<div class=\"input-append\"><input class=\"updater-text span2\" type=\"text\" value=\"" + $(this).text() + "\" /><button class=\"btn-comment\" type=\"button\" id=\"appendedInputButton\">Save</button>").off('click');
$('#appendedInputButton').on('click', function(e) {
e.stopPropagation();
e = $(this);
console.log(e.prev().val());
e.parent().html(e.prev().val()).on('click', clickEdit);
});
}
$(".td-edit").on('click', clickEdit);
Fiddle link: http://jsfiddle.net/9F67j/14/

Locating an element in a 'Facebox' box

Heres my link:
http://tinyurl.com/6j727e
If you click on the link in test.php, it opens in a modal box which is using the jquery 'facebox' script.
I'm trying to act upon a click event in this box, and if you view source of test.php you'll see where I'm trying to loacte the link within the modal box.
$('#facebox .hero-link').click(alert('click!'));
However, it doesn't detect a click and oddly enough the click event runs when the page loads.
The close button DOES however have a click event built in that closes the box, and I suspect my home-grown click event is being prevented somehow, but I can't figure it out.
Can anyone help? Typically its the very last part of a project and its holding me up, as is always the way ;)

First, the reason you're getting the alert on document load is because the #click method takes a function as an argument. Instead, you passed it the return value of alert, which immediately shows the alert dialog and returns null.
The reason the event binding isn't working is because at the time of document load, #facebox .hero-link does not yet exist. I think you have two options that will help you fix this.
Option 1) Bind the click event only after the facebox is revealed. Something like:
$(document).bind('reveal.facebox', function() {
$('#facebox .hero-link').click(function() { alert('click!'); });
});
Option 2) Look into using the jQuery Live Query Plugin
Live Query utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated.
jQuery Live Query will automatically bind the click event when it recognizes that Facebox modified the DOM. You should then only need to write this:
$('#facebox .hero-link').click(function() { alert('click!'); });

Alternatively use event delegation
This basically hooks events to containers rather than every element and queries the event.target in the container event.
It has multiple benefits in that you reduce the code noise (no need to rebind) it also is easier on browser memory (less events bound in the dom)
Quick example here
jQuery plugin for easy event delegation
P.S event delegation is pencilled to be in the next release (1.3) coming very soon.