Develop Reference

$.click() and $.trigger() does not activate the onchange function of a Checkbox

I want to programmatically check a checkbox and trigger the checkbox's onchange function
I have tried ("#myCheckbox").click() but it only checks it and does not call its onchange function
How can I get the onchange function to execute as well?
edit:
When the document is ready i need the checkbox checked and its on change function called programatically.

Your change listener needs to be set before you trigger the click on the checkbox. The following code works with no issues:
$("#myCheckbox").on('change', function(){
console.log('Change');
}).click();
JSFiddle

How about something like this:
$('#myCheckbox').prop({ checked: true });
theOnchangeFunction();
$('#myCheckbox').on('change', theOnchangeFunction);
function theOnchangeFunction(){
}

you can try like below
$("#scheck").attr('checked', 'checked').change();
it will check the check box as well trigger onchange event for checkbox
ex:
Script :
$(document).ready(function () {
$("#scheck").attr('checked', 'checked').change();
});
function checkitout() {
alert("onchange event fired");
}
HTML :
<input type="checkbox" name="tdcheck" id="scheck" onchange="checkitout();" />

Don't understand, it works : http://jsfiddle.net/FW5Lp/
<input type="checkbox" id="myc">
<button id='clic'>click</button>
$('#myc').on('change', function(){alert('ca change');});
$('#clic').on('click', function(){$('#myc').trigger('click') });

Try both events by using on() like,
("#myCheckbox").on('click change',function(e){
alert(e.type);
})

Disable HTML Link after it has been Clicked

I am trying to disable a link that submits my form after it has been clicked. This is needed to stop duplicate requests from the same user. Here is my code, but unfortunately it is not working.
<a id="submit-form-link" onclick="document.forms[0].submit()" class="next">Next <span>Step</span></a>
<script type="text/javascript">
$('#submit-form-link').click(function(){
$('submit-form-link', this).attr('style', 'pointer-events: none;');
});
</script>
I feel like I am close but it just is not working.

You're going about this wrong. Get rid of the inline onclick event handler and use this inside a document ready call:
$('#submit-form-link').one('click', function(){
$('form').submit();
});
This binds the click event to your link, but unbinds it after the first click.
You can see this in the console in this jsFiddle example. The first time you click the link it attempts to submit the form, but doesn't try on subsequent clicks.

Try this:
...
$('submit-form-link').off().click(function() { return false; });
...

<a id="submit-form-link" onclick="document.forms[0].submit()" class="next">Next <span>Step</span></a>
<script type="text/javascript">
$('#submit-form-link').click(function(){
if (!$(this).hasClass('disabled')) {
$('submit-form-link', this).attr('class', 'next disabled');
return true;
}
return false;
});
</script>
Here, you can create a class disabled and style it as you want. Just add this class after clicking the button so you will know that it is disabled. Then you return false to stop the event if the button was already clicked.

bind the click event again in the first click event callback function
$('#submit-form-link').click(function(){
$('submit-form-link', this).attr('style', 'pointer-events: none;');
$(this).click(function(e){e.preventDefault})
});

You have to remove the onclick attribute.
$('#submit-form-link').click(function(){
$(this).removeAttr('onclick');
});
Also, $('submit-form-link', this) is totally wrong. You are selecting nodes of type submit-form-link that are children of this. First of all you'd need #submit-form-link and second this is already a reference to the link node you just clicked.

Javascript change onmouseover to click

I have this working code, I need to change to a click instead of mouseover:
var l1OK_WC = false;
var l2OK_WC = false;
function share()
{
alert('yo');
}
function getIt_wc()
{
if(l1OK_WC && l2OK_WC)
window.open('http://google.ca','_self');
if(!l1OK_WC)
alert("Click button one");
else if(!l2OK_WC)
alert("Click Button two");
}
After this, I have this code:
onmouseover="javascript:l1OK_WC=true;"
onmouseover="javascript:l2OK_WC=true;"
How do I change this part into a click instead of onmouseover.
So they need to click instead of onmouseover.
I have tried changing to onclick but the script does not work anymore. It stays false and always displays the message of "click button one"

Unless I'm misunderstanding, it's just this simple...
onclick="javascript:l1OK_WC=true;"
onclick="javascript:l2OK_WC=true;"

You can change the HTML attribute to onclick, but that's not really best practice. Instead, why not attach an event handler to the elements in question?
Something along the lines of:
// Assuming you've already grabbed the elements and put them in the variable `myElements`
myElements.addEventListener('click', function() {
l10K_WC = true;
});
This lets you centralize your code (so you only need to make one change, instead of many throughout your HTML, as well as helps caching. For more information, see here: https://softwareengineering.stackexchange.com/a/86595/54164

Replace:
onmouseover="javascript:l1OK_WC=true;"
onmouseover="javascript:l2OK_WC=true;"
by
onclick="javascript:l1OK_WC=true;"
onclick="javascript:l2OK_WC=true;"
For more info see:
onClick and onMouseOver
Using an event listener:
<input type="button" value="Button 1" id="myButton1"/>
<input type="button" value="Button 2" id="myButton2"/>
<script>
myButton2.addEventListener("click", function() { alert('button 1 clicked!'; }, false);
myButton2.addEventListener("click", function() { alert('button 2 clicked!'; }, false);
</script>

You can use either the HTML this way:
your-element onclick="JavaScript code"
or use JavaScript to fire it...
object.onclick=function(){JavaScript Code};
If it's in a button you will have to wrap the button around it :-)
Hope this helps...

Why can't I trigger a click event on a hyperlink through code

I am trying to implement a manual click event on a hyper-link using jquery but I am not getting how to do it..
Here is my sample fiddle link [1]: http://jsfiddle.net/akki/XyVDd/1/
<input type="text" class="example" id="opval" value="back">
<a id="sub_name" href="http://www.google.co.in">abc</a>
$(document).ready(function(){
if($('#opval').val() =='back') {
$('#sub_name').click();
//$('#qwe').find('a').trigger('click');
}
$('#sub_name').click(function(){
alert(hi)
});
});

A few minor problems here:
1. You don't have jQuery loaded in your fiddle.
2. You need to have "hi" in quotes in your alert().
The main thing though is that you're triggering the click event before your click handler is attached. Just move the handler code to before the click trigger:
$(document).ready(function(){
$('#sub_name').click(function(){
alert("hi");
});
if($('#opval').val() =='back') {
$('#sub_name').click();
}
});

Trying to get a jquery script to hide an element when a user clicks outside the scope

I am trying to implement a bit of code that Twitter use to toggle off the drop-down login box when a user clicks outside the scope of the drop-down box itself.
I am having a bit of trouble, currently if I click outside the scope of the element it works as expected but the same thing also happens when I click inside the element scope I.e. within the #form element.
HTML Markup:
<body>
<div id="form">
<div id="form-tab"></div>
<div id="form-header">FooBar</div>
<form>
<label>Test</label>
<input type="text">
</form>
</div>
</body>
jQuery Code:
$(document).mouseup(function(e) {
if ($(e.target).parent("div#form").length==0) {
hide();
}
});
function hide() {
$element.animate({
right: $rightPos
}, 1000);
}
If anyone can help me figure out where I am going wrong it would be greatly appreciated.
Thanks in advance.

Create a click handler for the body element that hides the form. Create a click handler for the form that stops propagation of the click event. That way if you click inside the form, the event doesn't bubble up to the body event click handler.
$('body').click( function() {
hide();
});
$('#form').click( function(e) {
e.stopPropagation();
});

try:
$(':not(#form)').mouseup(function(e) {
hide();
});
http://api.jquery.com/not-selector/