Develop Reference

Javascript access div

I have a start script
<script>
$(function() {
$('.full-info').on('click',loadFull);
function loadFull(e) {
e.preventDefault();
$.get($(this).attr('href'), function(data) {
$('#pop-up').html(data).show();
});
};
});
</script>
<div class="Generalwrapper" >
<div class="wrapper pop-up" id="pop-up" style="display:none;" ></div>
</div>
After Get response i got data in Html format
<a href='#' class='close pop-up'></a>
So how to hide #pop-up div on .close pop-up click ?
As from start script .close pop-up is not accessible and also from output data #pop-up div is not accessible

The event handler for the click event can only be assigned after this line of code:
$('#pop_up').html(data).show();
The HTML is not loaded into the DOM until this line is executed.

Use Event Delegation using .on() delegated-events approach and bind event as
$('#pop-up').on('click', '.close.pop-up', function(){
e.preventDefault();
$('#pop-up').hide();
});
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.

$('#pop-up').on("popupbeforeposition", function(event, ui) {
// bind events like below
//$('.close.pop-up','#pop-up').off('click');
//$('#pop-up').on('click', '.close.pop-up', function(){
// e.preventDefault();
// $('#pop-up').hide();
//});
}

use below code . add below code in your $(function() { });
Learn about event delegation
Event delegation allows us to attach a single event listener, to a
parent element, that will fire for all descendants matching a
selector, whether those descendants exist now or are added in the
future.
$(function() {
$(document).on('click','.close',function(e){
e.preventDefault();
$('#pop-up').hide();
});
$('.full-info').on('click',loadFull);
function loadFull(e) {
e.preventDefault();
$.get($(this).attr('href'), function(data) {
$('#pop-up').html(data).show();
});
};
});
Second Option.( with nearest static parent )
$('.Generalwrapper').on('click','.close',function(e){
e.preventDefault();
$('#pop-up').hide();
});

You can use below code:
$(".close").click(function(){
e.preventDefault();
$("#pop-up").hide();
});
Let me know if you face any query/concern regarding this.
Thanks!

Check if on event is handled

How can I check, if a event is handled with .on in jquery?
For example I have added an event handler to the button click event:
$(document).on("click", "#button", function(event) {
alert("Handled buttonclick event!");
});
Now I want to check if the event is handled to prevent assigning the same event handler a second time.

Since you are delegating to the document - you need to check the document's event handlers
$._data(document,'events') // will return all event handlers bound to the document
Then you can do check the events you want.. for example click
var events = $._data(document,'events').click; // all click events
$.each(events,function(i,v){ // loop through
v.selector; // will give you all the selectors used in each delegated event
});
http://jsfiddle.net/B7zS6/
each object will contain the following
Object {type: "click", origType: "click", data: undefined, handler: function, guid: 2…}
data: undefined
guid: 2
handler: function (event) {
namespace: ""
needsContext: false
origType: "click"
selector: "#button"
type: "click"
__proto__: Object
This is assuming your delegated events are bound to the document object though. So in this case you "MUST" know which element the event handler is actually bound to. The other answers will probably work a lot better
so this method would not know about
$('body').on("click", "#button", function(event) {
alert("Handled buttonclick event!");
});
or
$('parentelement').on("click", "#button", function(event) {
alert("Handled buttonclick event!");
});

If you want to add a button click once only the you can use one() like,
$("#button").one("click",function(event) {
alert("Handled buttonclick event!");
});
or manually you can check by setting a variable like
var countClicked=0;
$(document).on("click", "#button", function(event) {
alert("You clicked button "+ (++countClicked) + " times");
});

How to take document on event handler except one class in document using jQuery?

I need to take whole document in mousemove event except one class in document using jQuery
My class is no-mousemove-node.
$(document).mousemove(
function(e){
....
});.
I tried like below, but no working
$(document).not('.no-mousemove-node').mousemove(
function(e){
....
});.
Is it possible to do this?

Use e.target inside your event handler to see if the source element matches your criteria, and abort execution if it does not:
$(document).mousemove(
function(e){
if ($(e.target).is(".no-mousemove-node")) return;
// now do what you need
}
});
Update: if you need to also filter out descendants of .no-mousemove-node use .closest to determine if you are, or have a parent that is, a .no-mousemove-node:
function(e){
if ($(e.target).closest(".no-mousemove-node").length) return;
}

$.on() bubbling after stopPropagation();

I'm trying to use .on() to tell me what i clicked on inside of a region. To capture the exact element I clicked on, I'm calling event.stopPropagation() to keep it from bubbling but my output is always #containerDiv and its contents.
How can I see exactly what was clicked on within #containerDiv? A code snippet is below:
$("#containerDiv").on("click",function(event){
event.stopPropagation();
console.log($(this));
});

Use event.target, not $(this); the latter will always be the element to which the handler was assigned.

When you capture the event on the container, the event has already bubbled.

Try giving the on() method a selector:
$("#containerDiv").on("click", "*", function(event){
event.stopPropagation();
console.log($(this));
});
Demo: http://jsfiddle.net/SnPjS/2/

jquery click event tr or input clicked

I have the following code:
$(document).ready(function () {
$("tr").live('click',function(){
alert("TR");
});
$("input").live('click',function(){
alert("INPUT");
});
});
Fiddle here
How can I just trigger the click function for the checkbox without triggering the tr function? Is there any solution with jQuery?
I will not set return false at the end of the input function and I really need the tr element too.
Info: event.stopPropagation doesn't work on live() events.

You can use the stopPropagation() method on the event object.
It will prevent the event from bubbling up without cancelling the default event behavior.
$(document).ready(function () {
$("tr").click(function(){
alert("TR");
});
$("input").click(function(e){
alert("INPUT");
e.stopPropagation();
});
});
As it seems you are using .live() and not direct event binding, you can't use stopPropagation().
First of all, .live() is legagcy code and has been deprecated, which means it could be removed from the library in any future new version. I don't know which version of jQuery you are using but you should consider moving to the latest (which is more optimized anyway) and use .on() for event delegation.
Nevertheless, if you can't upgrade your jquery library, here's maybe a solution to your problem. The event parameter passed to all event handler contains a property target which reference the element from which the event was initiated. So you could do something like:
$("tr").live('click',function(e){
if (e.target.nodeName !== "INPUT") {
// if ($(e.target).is('input') === false) { // jquery style but maybe less efficient
alert("TR");
}
});
Not very elegant but does the trick. Here's an example.
The problem with .live() is that events are binded to the document so as more complex as your application would become, you may end up with headaches to stop propagation.
In the meantime I've made a fiddle using .on() (here) and one using .delegate() (here).

You need to add stopPropagation() to your input click handler. It will stop the event bubbling up the DOM to parent elements.
$(document).ready(function () {
$("tr").click(function(){
alert("TR");
});
$("input").click(function(e){
alert("INPUT");
e.stopPropagation();
});
});
Example fiddle
OP Updated Question:
$(document).ready(function () {
$("TABLE").delegate("tr", 'click',function() {
alert("TR");
});
$("TABLE").delegate("input", 'click',function(e) {
e.stopPropagation();
alert("INPUT");
});
});

Use stopPropagation() for input handler
http://jsfiddle.net/KJg6Q/

http://jsfiddle.net/LwvYD/2/
e.stopPropagation() in handle on input or use e.relatedTarget
$("tr").click(function(e){
if( e.relatedTarget.tagName != "input" )
alert("TR");
});