Develop Reference

Why does Javascript function execute without waiting for onclick? [duplicate]

This question already has answers here:
addeventlistener not working, event not waiting for on click
(2 answers)
Closed 2 years ago.
function hide(c1) {
document.getElementById(c1).style.display = "none";
}
document.getElementById("red-circle").onclick = hide("red-circle");
When the page loads, the red circle is automatically hidden. I am trying to understand how to define the "hide" function to call it later while passing the name of the item to be hidden.

It's because in the code you posted, you are trying to set the onclick event to the return value of the hide function, instead of the hide function itself. Try this:
function hide(c1) {
document.getElementById(c1).style.display = "none";
}
document.getElementById("red-circle").onclick = function(){
hide("red-circle");
};

JQuery on() method in native javascript for dynamically generated elements [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
I'm looking for native JavaScript code for this example with jQuery:
$("#parent").on("click", ".child", function(){
alert("clicked");
});
What I did so far works with the elements that come with the page but not the dynamically generated ones:
var children = document.getElementById("parent").getElementsByClassName("child");
for (var i = 0, l = children.length; i < l; i++)
{
children[i].onclick = foo;
}
function foo(el)
{
alert("child clicked");
}
How can I make this code work for the dynamically generated elements?
If you are looking for the answer, here it is:
https://stackoverflow.com/a/27373951/2748984

You could do something like the following, which listens for elements being added to the document, and then binds your function. I would also recommend binding an event listener rather than assigning your method to the onclick attribute, but check out this answer to see what you really need:
// listen for new elements being added to the document
document.addEventListener('DOMNodeInserted', function(event) {
// check if they're the type of node you're looking for
if (event.relatedNode.querySelectorAll('your selector')) {
// bind the event listener
event.relatedNode.addEventListener('click', function(event) {
// your code
});
}
});

Can't access the DOM of html loaded by jQuery [duplicate]

This question already has answers here:
How do I attach events to dynamic HTML elements with jQuery? [duplicate]
(8 answers)
adding jQuery click events to dynamically added content
(4 answers)
Closed 8 years ago.
I have a page with an empty div and when the user clicks on a button, a jQuery function is executed and loads some content. The problem I have is that I can't access the elements inside the div.
For example, if a link is loaded, if I have a function that executes when a link is clicked, it has no effect since the link is loaded content.
EDIT: an example code of how I load content.
$('#all').click(function(e){
e.preventDefault();
all = true;
$.ajax({
type: 'POST',
url: './?ajax=cars',
data : {all : true},
success: function(data){
$('#ajaxTable').html(data);
}
});
});

Replace:
$('#all').click(function(e){ /* code here */ });
With:
$(document).on('click', '#all', function(e){ /* code here */ });
The #all element is created after the click event is assigned so it won't apply to a new #all element. Using $(document).on() any #all contained inside the document regardless of load time will observe the event.

How to distinguish between mouse click and .click() in javascript/jquery? [duplicate]

This question already has answers here:
In jQuery, how can I tell between a programmatic and user click?
(7 answers)
Closed 8 years ago.
In javascript/jquery, I have a button that have a click event defined like:
$("#target").click(function() {
var mouse_click = ________________;
// do stuff
if (mouse_click) {
// do stuff
}
// do stuff
});
and I also have code to do
$('#target').click();
How can I get the variable mouse_click to be true, if the user manually clicked the tag using the mouse, and the variable to be false when I click the tag using the .click() function?
Thanks

You could use this:
$("#target").click(function(e) {
var mouse_click = !(e.originalEvent === undefined);
// do stuff
if (mouse_click) {
// do stuff
}
// do stuff
});
or you could check e.isTrigger which is set whenever an event is triggered within jQuery. You'd just need to change the second line to:
var mouse_click = !e.isTrigger;
Both will work but you might prefer the second option as it's a little more concise.
Here it is working: http://jsfiddle.net/2U3Us/4/

How to load script using .load() [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Why does jQuery or a DOM method such as `getElementByID` not find the element?
I load the file using jquery.load(). In my load_to.html I am targeting the element with id as
$('#users').change(function() {
alert('hello');
});
this element is present in load_from.html. I couldn't able to target this. But when I inspect the page I can able to see this element.
I loaded the page like this
$('#mydiv').load('/user/1/edit form');
How to target the element?

Use on in it's delegate signature:
$('#mydiv').on('change', '#users', function() {
alert('hello');
});
Read the docs

Try to set up your events in the callback from .load to make sure they are created once the elements enter the DOM.
$('#mydiv').load('/user/1/edit form', function () {
//Callback
//set up events here (once it is finished loading)
$('#users').change(function() {
alert('hello');
});
});