Develop Reference

jQuery click event does not fire on 'loaded' html

I'm trying to understand why loading HTML into a div block renders its class statement effectively non-existent to a click event.
My HTML code looks like this:
<div id="load-to"></div>
<div id="load-from">
<div class="load-from-css"> Hello!</div>
</div>
<button>load it!</button>
My JS code looks like this:
$('button').click(function(){
var html = $('#load-from').html();
$('#load-to').html(html);
});
$('.load-from-css').click(function(){
alert('clicked');
});
When I click the button the HTML from the lower div block is loaded into the upper div block, and then the HTML looks like this:
<div id="load-to">
<div class="load-from-css"> Hello!</div>
</div>
<div id="load-from">
<div class="load-from-css"> Hello!</div>
</div>
My question is, why does the second click event (defined in my jQuery code) only work on the original lower "Hello!" div block but not on the loaded upper one, when both have the same class definition?

Other answers have already covered the core reason for your problem (that copying the HTML of an element and placing it elsewhere will create a brand new DOM element and does not copy any events that were bound to the original element... keeping in mind that when you add an event listener, it will only bind to any elements that exist at the time that you do so)
However, I wanted to add some other options for accomplishing what you want to do.
jQuery has a few different techniques that make this sort of thing easy:
.clone() will essentially do the same thing as you are doing now*, it will copy the HTML content and create a new DOM element. However, if you pass true (ie: .clone(true)), it will clone it with all data and events intact.
* note that to truly get the same result as using .html(), you need to do .children().clone(), otherwise you'll get both the inner and outer div.. this may or may not be necessary depending on the use case
ex: https://jsfiddle.net/Lx0973gc/1/
Additionally, if you were in this same situation but did not want to make a clone, and simply wanted to move an element from one place to another, there is another method called .detach() which will remove the element from the DOM, but keep all data and events, allowing you to re-insert it later, in the same state.
ex: https://jsfiddle.net/Lx0973gc/2/ (not the best example because you won't see it move anywhere, but it's doing it!)
As another alternative, you can use delegated event binding, which actually binds the event to a different element (a parent) which you know won't change, but still allows you to target a child element within it:
$('body').on({
'click': function() {
alert('clicked');
}
}, '.load-from-css');
ex: https://jsfiddle.net/Lx0973gc/4/

The $('.load-from-css') finds all elements currently existing and .click(...) attaches a listener to all these elements. This is executed once.
Then you copy the raw html which does not transfer any listeners. The DOM has nodes onto which the listeners are attached but when you copy the plain HTML you essentially create new nodes based on the html.

Because you are copying just the HTML. The js file is loaded at the beginning, when there is just one instance of a div with the "load-from-css" class. You should execute again the code adding the listener after you copy the html. Somethinglike:
$('button').click(function(){
var html = $('#load-from').html();
$('#load-to').html(html);
$('.load-from-css').click(function(){
alert('clicked');
});
});

#load-to inner HTML is initially empty. so added click listener only for #load-from .load-from-css. Dynamically bind element will not attach the click listener.
jQuery new version have the feature to attach the event for dynamic elements also. Try this
$('button').click(function(){
var html = $('#load-from').html();
$('#load-to').html(html);
});
$(document).on('click', '.load-from-css', function(){
alert('clicked');
});
Also we can use like this
$( document ).delegate( "load-from-css", "click", function() {
alert( "Clicked!" ); // jQuery 1.4.3+
});

Simply because the page did not refresh. You loaded a content to another content without loading the page, and the browser wont recognized any event added to the loaded element.
What you should do is load your javascript tag with the load along with the content.
Your code should be like this:
<div id="load-to">
<div class="load-from-css"> Hello!</div>
</div>
<div id="load-from">
<div class="load-from-css"> Hello!</div>
<script>$('button').click(function(){
var html = $('#load-from').html();
$('#load-to').html(html);
});
$('.load-from-css').click(function(){
alert('clicked');
});</script>
</div>

Attach event to document other than 1 div

I have created an inspector type feature that will give you a divs ID when you click anything on the page. I have used:
document.attachEvent('click', inspectorOnClick);
I've now decided to add another feature, I now need this event attached to everything in the document other than one div is that possible?
EDIT:
I thought one of the links in the comments solved my problem, but there is a bit more to it than I thought.
Let me explain, when the document loads.
document.attachEvent('click', inspectorOnClick);
Is attached, once an element is clicked I dynamically create an overlay div in the position of the cursor. I want to take the event off of this dynamically created div. I have tried:
//prepend dynamicly created div to body
document.body.insertBefore(overlayDiv, document.body.childNodes[0];
var getOverlay = document.getElementsByClassName('bsOverlay');
getOverlay.attachEvent("click", function(){ return false; }
I have also tried a different last line which is
getOverlay.detachEvent("click", inspectorCancel)

adding a new section on webpage using only css and js

I am trying to click on an image on my webpage and it open a new section on the page that would be created in css and javascript/jquery. I thought about using .addclass() but i am not entirely sure how to go about it. Can anyone give me an example of this being done?

An example by clicking on a element with the id foo and adding a div with the id bar after that element:
$("#foo").click(function(){
$(this).after('<div id="bar">Some content</div>');
});
Of course, there are multiple methods in jQuery which insert content somewhere in the DOM tree, see:
https://api.jquery.com/category/manipulation/dom-insertion-outside/
https://api.jquery.com/category/manipulation/dom-insertion-inside/

There are many ways to do it. As an example, you can simply attach a click event handler to your image, like so:
$('img').click(newSection);
function newSection() {
$('#someDiv').append('<div class="newSection"></div>');
}

jQuery select dynamically created html element

There are a lot of asked questions with almost similar titles with this question of mine, but you know I didn't find an answer.
My simple question is:
I have button, when I click on it, javascript creates modal window
<div class="aui-dialog">
html here...
<button id="closeButton">Close</button>
</div>
just after <body> tag.
I can bind click event of close button with no problem using jQuery live:
$("#closeButton").live("click", function() {
alert("asdf"); // it calls
$("body").find(".aui-dialog").remove();
});
My problem is, I cannot select that dynamically created modal window div by its classname. So that I could call jQuery .remove() method to make close action. Now I know, I must deal with dynamic elements in another way.
What way?
EDIT:
I think it's important to mention this:
I dont' create the modal window myself, I use liferay portal. It has built-in javascript framework AUI(YUI) that creates that modal window. I can just create that close button inside it in its view.
EDIT 2:
Modal window div class attribute value is: "aui-component aui-panel aui-dialog aui-widget-positioned"

Since jquery will read the current DOM-state when page loads:
jQuery( document ).ready(function( $ ) {
it will miss the elements you generate post to page load.
One simple solution is to listen for clicks on document, and filter with the class or element-type that you want to use to execute your code. That way jquery will find new elements generated under document, after page load.
$(document).on("click", '#closeButton', function(){
$(".aui-dialog").remove();
});

Create a reference when you're creating the modal window:
var modalWindow = $('<div class="aui-dialog">html here... <button id="closeButton">Close</button></div>');
// later...
modalWindow.remove();
To your edit:
Get the window via jQuery's parent when the button is inside the modal window:
$('#closeButton').on('click',function() {
$(this).parent().remove();
return false;
});

Many users will come on this page when they want to select some element generated runtime by JQuery and it failed, like me.
The solution is simply approach the root (the parent) of your randomly generated element and then get inner by jQuery TAG selection. For example you generate many TDs of users in a table at runtime, the element having your users list is a table with id tblUsers then you can iterate over runtime generated TRs or TDs as following:
$("#tblUsers tr").each(function(i){
alert('td' + i);
});
further if you have inputs in tds you can go deep in selection as
$("tblUsers tr td input")
Another case could be a randomly generated dialog or popup, then you have to approach its root(parent) and next same selection by TAG as stated above.

You could do a few things, but first, if you are using jQuery 1.7, better use .on(). it has replaced .live() which is deprecated.
if you have no control over the building of the modal but know that the button is a direct child of the modal, then use parent()
$('#closeButton').on('click',function() {
$(this).parent().remove();
return false;
});
if the button is somewhere deep in the parent but has a fixed depth from the parent, use parents() which gets all ancestors of the element, and then filter it to a specific depth. if the close was 2 levels deep, the index of :eq() would be 1.
$('#closeButton').on('click',function() {
//where N is zero-indexed integer, meaning first item of the set starts with 0
$(this).parents(':eq(N)').remove();
return false;
});
another way is to add the handler when the modal is created
var modal = $('modalHTML');
$('#closeButton',modal).on('click',function(){
//modal still refers to the whole modal html in this scope
modal.remove();
});
//show modal

UPDATED:
You can use:
$(".aui-dialog").live('click', function() {
$(this).remove();
return false;
});)
This attach an event handler for all elements which match the current selector, now and in the future.
Please not that this method is depreciated in newer version of jQuery and you should consider using .on() instead of .live().

I found an answer, hope it would be helpful for developers who faced with dynamically generated html with IFRAME inside.
If you have a button (#closeButton) inside that IFRAME, and you want select iframe parent window's dom elements, just add second argument window.parent.document for your selector:
// This functions is inside generated IFRAME
$("#closeButton").on("click", function() {
// body - is your main page body tag
/* Will alert all html with your dynamically
generated html with iframe and etc. */
alert($('body', window.parent.document).html());
return false;
});

Javascript:parent in jquery

onmouseover="javascript:parent.DivColorHover(this)"
i have a div in which values are created dynamically, i use this div as popup so that it will be used as dropdown list elements.
onMouseOver of each value i am changing background color using the above line of code in javascript. how do i achieve the same in jquery

Let's first look at the code that you are using.
The javascript: protocol is out of place (it's used when code is placed in an URL) so it just becomes an unused label.
The parent object is a reference to the page that contains the iframe that the current page is in. As you are probably not in an iframe but a regular page, it will just be a reference to the current page.
So, all that is left of the code is actually:
onmouseover="DivColorHover(this)"
To add the same event using jQuery you need some way to identify the element, for example by adding an id="something", then you can do this:
$(function(){
$('#something').mouseover(function(){
DivColorHover(this);
});
});

jQuery(document).ready(function(){
$("#yourid").mouseover(function() {
$("#yourid").parent().css("backgroundColour":"red");
}
}
When html loaded jquery binds the defined function to the mouseover event of element with id="yourid".
This way you keep behaviour (event handlers) and structure (html) separate, easier to understand (for me at least).