Develop Reference

How can I either target an Appended element using Jquery or Javascript, or how can I add that appened element to the DOM?

I've looked all over the internet with everyone giving the same answer
$(document).on('click', '#targetID', function() {
// do stuff
});
instead of
$('#targetID').click(function() {
// do stuff
});
This is nice and it works fine, if you have a click event. But within that on click function, the part where it says do stuff, how can I now target an appended element? For instance say I append 2 divs back to back.
<div id="mainDiv"></div>
<script>
socket.on('event', function (data) {
$('#mainDiv').append ('<div class="1st" id="'+data.id+'">one</div>
<div class="2nd" id="'+data.id+'">second</div>');
});
$(document).on('click', '.1st', function() {
//and right here i would like to`enter something like
$('.2nd').css('background-color','yellow');
}
</scirpt>
This however seems not to work because to my knowledge, this element hasn't been added to the DOM. So what should I do? Should i use angular.js for this?
PS I've also tried adding the entire appended content into a variable first before appending that variable. and then using variable.find to find the element within to no avail. The variable only has context within that function, but is null in the on click function. Thanks in advance for any information that broadens my understanding of this.

The delegation of 'on' is correct. Once the div element exists in the dom, clicking should work. My only concern is you have named your classname beginning with a number. Maybe name it with an alpha character followed by a number.

The difference between the 2 is the concept of event binding vs event delegation.
$('#targetID').click(function() { is event binding which works on elements as long as they exist in the markup when the page or document loads.
$(document).on('click', '#targetID', function() { is event delegation which means the event would listen to the document for the click event on the element with ID targetID if it exists in the DOM when the page loads or if it is dynamically added.
So In your case, its event delegation since you are dynamically adding the elements. But in order to make it work, you need to register the listener on the document ready event for the document to listen to the event on the element #targetID
<script>
$(document).ready(function() // Add this
{
socket.on('event', function (data) {
$('#mainDiv').append ('<div class="1st" id="'+data.id+'">one</div><div class="2nd" id="'+data.id+'">second</div>');
});
$(document).on('click', '.1st', function() {
//and right here i would like to`enter something like
$('.2nd').css('background-color','yellow');
});
});
</script>
Here's an example : https://jsfiddle.net/nobcp0L7/1/

jquery on not working properly

I have the following jquery code
$(".delete").on('click', function (e){
e.preventDefault();
var id = $(this).prop('id');
console.log('Delete button id: '+id);
var formWrapper = $(".form-wrapper:nth-child("+id+")");
console.log(formWrapper);
formWrapper.remove();
});
the delete .delete is on a button inside a form
<button class="btn btn-danger delete">-<button>
and the button is loaded on the paged ynamically after the page has loaded. So I used the on function to attach the click event on it. But it won't work and the function is never called. Isn't on supposed to work not only for elements that are on the page during load but for those that get loaded afterwards?

You are saying that the particular button is getting loaded to the DOM dynamically, so in this context you have to use event-delegation to make your code working.
Normally your code will register event for the element with the class .delete immediately after the DOM loaded. Actually we dont have any elements with that identity at that time, So this context is opt for event-delegation.
I actually dont know the exact dom structure of yours, so that i have used document to delegate the click event, But you should prefer some static parent of that element to implement it,
Try,
$(document).on("click",".delete", function (e){

You need to use event delegation for dynamically generated elements. thus use .on() using delegated-events approach.
i.e.
$(document).on('event','selector',callback_function)
Use
$(document).on('click',".delete", function (e){
In place of document you should use closest static container.
The delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, we can use delegated events to bind the click event to dynamically created elements and also to avoid the need to frequently attach and remove event handlers.

you should either use,
$(document).on('click',".delete", function (){});
or
$(".delete").click(function(){});

You can try jquery delegate() Method.
In jquery version 7 there was a term live however in latest one its removed and replace with delegate
you can check below example
HTML
< div class="delete"> Click Here < /div >
Javascript
$(document).delegate( ".delete", "click", function() {
alert("Hi")
});

This might help: http://jsfiddle.net/webcarvers/7Qtd7/
HTML:
<button id="one" class="delete"type="button">Id on me</button>
<div id="one">This is the div to remove</div>
JS:
$(document).ready(function(){
$("button.delete").on('click', function(){
var id = $(this).attr("id");
$("div#"+id).remove();
});
});

Two Ajax dynamically created elements can't recognize each other

Dear Stack Overflow community,
I have been trying to develop a table creator that creates two tables dynamically when a button is clicked. This has worked... Well it hasn't at least for now.
Right now I am generating a <p> element with class heading and a <div> element with class content. When p is clicked, content is slideToogled.
I have tried using on() with jQuery or attaching any function to the element but it doesn't seem to work. Also .hide() doesn't work on content which is extremely annoying. Can anyone give me some advice as to how to approach this please?
On seems to work for content I hard written with HTML, but it doesn't on AJAX generated code appended to the div.
Here are the related snippets of code:
Ajax:
function submition() {
$.ajax({
type: 'GET',
url: 'phpQueries.php?q=getQueryBuilder&schools=' + mySchools.toString()+ '&depts=' + myDeps.toString() + '&lvls=' + myLevs.toString() + '&srcs='+mySrc.toString() + '&codes='+myCodes.toString(),
success: function (data) {
$("#dump_here").append(data);
}
});
jquery:
$(".heading").on("click", function() {
alert("Hello World");
$(this).next(".content").slideToggle(500);
});
PHP:
echo '<p class="heading">See/Hide Comments</p> ';
echo '<div class="content">I am I am I am.... Superman!</div>';
Kind Regards,
Gempio

This because (if I understand correctly) you create a <p> tag with the class heading after you assign the click event handler.
What you want to do is delegate your events to a container that contains your <p> tag. So, let's assume this is your structure:
<div id="dump_here"></div>
You then do this in your JavaScript:
$("#dump_here").on("click", ".heading", function () {
....
This way you assign an event handler to the parent container which already exists, and the event will bubble up once you click on your paragraph. Now you can dynamically add new elements to your HTML within that container and your event handlers will still work.
Why is that? Because you can't assign event handlers to elements that don't exist.
When you do this:
$(".something").click(...)
You don't tell Javascript to do something whenever you click any element with the something class on the page, you assign an event handler to every single already-existing something on the page. If you create a new element, even if it is the same class, you still need to assign an event handler to it.
A quote from the jQuery documentation:
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on()
Also David Walsh wrote a nice article explaining Event Delegation.
Hope this helps.

Change this:
$(".heading").on("click", function() {
alert("Hello World");
$(this).next(".content").slideToggle(500);
});
to:
$(document).on("click", ".heading", function() {
alert("Hello World");
$(this).next(".content").slideToggle(500);
});
Alternatively you can put the definition of $(".heading").on("click", ...) into your AJAX success callback, but if you have multiple .heading elements you'll run into multiple event bindings for elements that were there before the AJAX runs, say if it runs twice and appends 2 tables. The reason your method didn't work is the element has to exist before the event is bound. The 1st option I proposed works because the document is where the event is bound, and the last option works because it's in the callback of the AJAX that creates the element, so the element exists at the time it was bound.

So let's say, that this is your HTML:
<div id="dump_here">
<!-- contents here are dynamic - these don't exist when the page first loads -->
<p class="heading">See/Hide Comments</p>
<div class="content">I am I am I am.... Superman!</div>
<!-- end of dynamic content -->
</div>
Now on doc ready you attach your handler:
$(function() {
// $(".heading").click(//...this won't work, heading doesn't exist on load
$("#dump_here").on("click",".heading",function() {
// this will work - the handler is attached to an element that exists on load
// and will respond to event that bubble up from elements with the class 'heading'
});
submition(); // async function that populates your dynamic parts.
});
Be sure to read the docs on .on()
The important part to understand is this:
$(".heading")
This returns a collection of jQuery objects that represent DOM elements that have the class of heading. If there are no matching elements in the DOM when you execute that line, you will have an empty collection. But jQuery won't complain about this and will still let you chain to that empty collection:
$(".heading").on("click", function() { //...
What this says is attach an event handler to all the matching dom elements in my collection that will execute this function when the click event is triggered. But if your collection is empty, it won't do anything.

return false on dynamically created element

I'm trying to prevent an event on dynamically created elements.
I tried several ways but none worked.
On deafult, a click on the div containing the class opens a menu, and I want to disable that.
This is my code (please note I'm using jQuery 1.6.4 so I'm not able to use the "on" method).
$(function() {
$( document ).delegate( "span.highlight_mkt", "click", function() {
return false;
});
});
I have tried this using the "live" method as well but without any success.
Any help would be much appreciated.

maybe this link helps you -> preventDefault
$(document).delegate("span.highlight_mkt", "click", function (e) {
e.preventDefault();
/* your code here */
});
EDIT
you tried this too?
$('span.highlight_mkt').live("click", function (e) {
e.preventDefault();
/* your code here */
});

This one should stops the event propagation:
$(function() {
$( document ).delegate( "span.highlight_mkt", "click", function(e) {
e.preventDefault();
e.stopPropagation();
return false;
});
});

What I understand from your question is you have span with highlight_mkt class in your html form with click event attached using selector or document. And you are loading using Ajax or dynamically creating other span with same class name.
So in order to prevent events on your dynamically created elements you can use .die() function with container name where you are attaching dynamically created elements as following:
$('container_selector span.highligh_mkt').die('click');
In this method click event will be fired only your elements which is not attached dynamically.
If I understand you incorrectly please clarify your question.
What you did is you are attached event handler to document element or global container using .live() jquery function. So it is not good thing to do. I will explain later.
$('body').live('click','span.hihligh_mkt', function(e){
//Your code here. Which is doing some cool staff i believe :)
});
However if you want to prevent only for dynamically created elements do following:
$('body').live('click', 'span.some_class', function(e){
// This part is needed in order to check weather it is attached dynamically
// or it is predefined html objects
if($(e.target).closest('#some_container').length==0)
{
//Your code here. Which is doing some cool staff i believe :)
}
});
So in above you will just check, does event fairing element is dynamically attached to container element or it is part original html. Of course this kind of method can be avoided if you will use event which will be attached individually to the the elements like following when DOM ready.
$('span.hihligh_mkt').live('click', funtion(e){});
In this case only elements which was exists in DOM ready will get handlers. Other dynamically attached elements will not have event handlers. Unless you are not doing deep cloning of span elements.
Another thing is here when you attaching event handler to body or other root elements it gives you slow performance. You can read about it here.
Since all .live() events are attached at the document element, events
take the longest and slowest possible path before they are handled.
You can see some example here.

jQuery functions not working after JS innerHTML property

I am using this code in my application:
document.getElementById("inventory_box").innerHTML = "<img src='./img/rock.gif' id='test' />";
The #inventory_box element is present already, so it just spews out the IMG into #inventory_box.
What I want is to be able to click this appeared IMG with id name test,
but won't work like:
$("#test").click(function() {
// Run this
});

Try this,
$(document).on('click',"#test",function() {
alert('test');
});
Read on()

Since the image is added dynamically, you need to use event delegation to register the event handler
// New way (jQuery 1.7+) - .on(events, selector, handler)
$('#inventory_box').on('click', '#test', function() {
// Run this
});
This will attach your event to test image element within the #inventory_box element,
reducing the scope of having to check the whole document element tree and increasing efficiency.

Consider using 'append' instead of innerHTML. Using a mix of vanilla JavaScript & jQuery seems to be causing some delay in updating the DOM with the new element.
The code below works for me.
$("#inventory_box").append("<img src='./img/rock.gif' id='test' />")
$('#test').click(function(d){console.log("clicked!");});

Your assignment of event handler runs before there is an element having such id, so after you create an element, it will not have any event handler assigned to it.
As it was suggested, easiest way to solve this common javascript error, you can assign event to a container DOM element and use jquery's event delegation to fire events on event newly added DOM elements.
But I rather not use this approach, the reason I can not give you, say, I just simply prefer not to.
Always assign events after element is created. for example:
document.getElementById("inventory_box").innerHTML = "<img src='./img/rock.gif' id='test' />";
immediately after this, execute this:
$("#test").click(function() {
// Run this
});

$('#inventory_box img').click(function() {
// Run this
});