Develop Reference

Triggering button click in jQuery not working

Using dot.js I'm adding a button to a specific web page that, when clicked, should add some text to a text field and then trigger another button to also be clicked. I simulate this by adding a click handler to my button which has this code:
var button = $('.some-class').find('button')[0];
console.log(button); // element I expect
button.click();
However, this doesn't work and I'm not sure why. If instead of .click() I perform .remove(), the button is removed from the page. If I use the console to execute the same code, the button does get clicked. This tells me I do have the right element, but there is something wrong with the click() event specifically.
Can someone explain why this isn't working in either Safari or Chrome? I've tried a lot of different things, but I'm new to jQuery so I'm probably missing some detail in how that works.

We went to the bottom of this in the chat. What probably caused the problem was another event-handler attached to (possibly) body, that undid the click.
So the solution was to stop the event from propagating:
event.stopPropagation();

While assigning the click event handler to the button you should use jquery on
This should ensure that whenever a new button with added with same selector (as in when event was assigned), event handled will be assigned to that button
Some examples here

The problem is the click() function is from jquery and you're attempting to fire the click function from the DOM object.
Try
$(button).click();
Here's a plunk.
http://plnkr.co/edit/2pcgVt

You can use the following statement.
var button = $('.some-class').find('button')[0].trigger('click');

try jquery's trigger() function:
$(button).trigger('click');
see jsfiddle: https://jsfiddle.net/665hjqwk/

Detecting an onfocusout on a text input after focusing

I'm trying to detect a focusout of an input. First when I click a button it focuses it on the input I want, however when I put the focusout function, the entire script stops working. My syntax is
$(document).ready(function(){
$('#editcategorydiv').click(function(){
$('#cardrop').hide();
$('#caredit').show();
$('#categorynme').focus();
$('#categorynme').focusout(
$('#form1').submit();
);
}
Is there something wrong with my syntax? Or are there workaround I could use?

You should use blur instead of focusout
$('#categorynme').on('blur', function () {$('#form1').submit()});
and yes, this script is not correct as you can see click function for $('#editcategorydiv')
is not closed, and i guess you also cant use semicolon in focusout form submit. Here is the fixed one:
$(document).ready(function(){
$('#editcategorydiv').click(function(){
$('#cardrop').hide();
$('#caredit').show();
$('#categorynme').focus();
$('#categorynme').focusout( $('#form1').submit() );
});
});

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

javascript/jquery trigger a text change event on a textarea

Is there anyway to trigger the textChanged event in a text area using javascript or jquery ?
I want the textchange event to occur once the page is loaded.

$(document).ready(function() {
$('textarea').trigger('change');
});
But this will only trigger if the change event was added through jQuery. If not you could try:
$('textarea').get(0).change();

Have you tried:
$(function(){
$("textarea").change()
})

In my case, I have to use the event input since my textarea used as emoji field.
For ex.
$('textarea').trigger('input');

How do I force a blur event to occur in JavaScript?

Here's what I want to do. I want to trigger an event every time a select element changes. I have a multiline select and when I make changes (click on elements), it does not change until the select box loses focus. So I'm trying to force a blur every time the select box is clicked. That way if it changes, it will trigger the changed event. If it doesn't change, nothing will happen.
How do I do this? Am I even approaching this the right way? Jquery answers are okay as well.

In addition to Ender the full code could be something like this.
$('#mySelectBox').change(function() {
$('#thingToBlur').blur();
})
Reference: http://api.jquery.com/blur/

This will find the element with the focus and trigger the blur event.
function blur(){
document.querySelectorAll('input,textarea').forEach(function(element){
if(element === document.activeElement) {
return element.blur();
}
});
}

Using jQuery do:
$('#mySelectBox').change(function() {
//do things here
});
According to the documentation at http://api.jquery.com/change/, the event is triggered immediately when the user makes a selection.
Check out this demo to verify that this works: http://jsfiddle.net/AHM8j/

You could attach an onclick handler to the select and the individual options. basically onclick="this.blur();". I've always found that click events on <select> elements to be a pain, as nothing happens at the point you expect it to.

Okay, Here's what was going on. I was including the -vsdoc version of JQuery instead of the actual JQuery library. This also fixes some issues I was having with some plugins such as blockUI.