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!

how to stop the event of the class without refreshing

i have used the event for the whole row and perform some function by ajax in the page task.php and change the style removed the class and displayed the message without refreshing the page . Eventhough i have removed the class view_task its still getting worked and doing the function how to prevent it. and also changed the class with toggle class(jquery function
$('#task tbody tr.view_task').dblclick(function(e){
var task_id = this.id.split('-');
var id = this.id;
$.post('task.php',{'task':task_id[1],'action':'update_count','type':task_id[2],'index':task_id[3]},function(data){
$('#'+id).css('background-color','white');
$('#'+id).removeClass( "view_task" );
$("#message2").html('<span id="msg">Task Viewed <img src="images/remove.png" /></span>');
});
e.preventDefault();
});

When you install an event handler like this:
$('#task tbody tr.view_task').dblclick(function(e){
it is installed initially and will remain on the object no matter what class changes you make to the object.
If you want the event handlers to be dynamic and change as the class changes, then you need to use the delegated form of .on() like this:
$('#task tbody').on("dblclick", "tr.view_task", function(e){...});
This will actually attach the event handler to #task tbody and then each time a dblclick event bubbles up to that element, it will check to see if it originated on an element that has "tr.view_task". This will allow it to only respond if the appropriate class is still on the clicked on object.
See these references for other info on delegated event handling:
JQuery Event Handlers - What's the "Best" method
jQuery .live() vs .on() method for adding a click event after loading dynamic html
Does jQuery.on() work for elements that are added after the event handler is created?
jQuery selector doesn't update after dynamically adding new elements
Should all jquery events be bound to $(document)?

Try this:
$('#task tbody tr.view_task').unbind();
or if you only want to remove click event
$('#task tbody tr.view_task').unbind("click");

You need to unbind or off the event of .view_task class
Example:
$('#task tbody tr.view_task').off('dblclick');
OR
$('#task tbody tr.view_task').unbind('dblclick');

$('#task tbody tr.view_task').dblclick(function(e){});
Above statement finds element the bind the event with them, if you remove selector it will have no impact.
You can use either .off() to remove event handler.
$('#task tbody tr.view_task').dblclick(function(e){
var self = this;
$.post('task.php',{'task':task_id[1],'action':'update_count','type':task_id[2],'index':task_id[3]},function(data){
$(self).off('dblclick')
});
});
OR, You can use Event Delegation using .on() delegated-events approach.
$('#task tbody').on('dblclick', 'tr.view_task', function(e){
//Your code
})

Try
$("#task tbody tr.view_task").dblclick(function(e) {
if ($(this).hasClass("view_task")) {
// do stuff
$(this).removeClass("view_task")
};
e.preventDefault();
});
$("body").addClass("view_task")
.on("dblclick", function(e) {
if ($(this).hasClass("view_task")) {
// do stuff
console.log(this.className);
$(this).removeClass("view_task");
};
e.preventDefault();
});
body {
width:400px;
height:400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
dblclick

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();
});
});

How to add onclick to Div with a specific class name?

I have a few generated div's on my page listing events on a calender, they all have the same class "fc-event-inner". I would like to add a onclick to these div's but am struggling to get this right.
This is what iv tried, no onclick is added and no errors on page.
$(document).ready(function () {
$('.fc-event-inner').each(
function (element) {
Event.observe("click", element, EventClick);
}
);
function EventClick() {
alert("You clicked an event")
}
});
This is an example of a generated event div:
<div class="fc-event-inner">
<span class="fc-event-title">Requested<br>by Santa</span>
</div>

Use the delegate version of on
$(document).on("click", ".fc-event-inner", function(){
/// do your stuff here
});
This catches the click at the document level then applies the class filter to see if the item clicked is relevant.
Example JSFiddle: http://jsfiddle.net/BkRJ2/
In answer to comment:
You can access the clicked element via this inside the event function. e.g.
$(document).on("click", ".fc-event-inner", function(){
var id = this.id; // Get the DOM element id (if it has one)
var $this = $(this); // Convert DOM element into a jQuery object to do cool stuff
$this.css({'background-color': 'red'}); // e.g. Turn clicked element red
});
*Note: You should never have to run an Each in order to catch events on multiple items that have a common class.

You do not need each() to bind event to elements with specific class, just selector is enough. Use jQuery on() with event delegation it will bind event to those which are generted after the binding code.
$(document).on("click", ".fc-event-inner", function(){
alert("click");
});
Delegated events
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, you can use delegated events to
avoid the need to frequently attach and remove event handlers, jQuery doc.

<div class="fc-event-inner">
<span class="fc-event-title">Requested<br />by Santa</span>
</div>
Your JS:
<script>
$(document).ready(function () {
$('.fc-event-inner').on("click", EventClick);
function EventClick() {
alert("You clicked an event")
}
});
</script>
http://jsfiddle.net/UBhk9/
Some explanation:
Because you are using a class(it may be used multiple times, in contrast to an id) it will work for all the elements with this class name. The .on method will attach the event handler(in this example "click") to the selector(the class .fc-event-inner). If you want to remove events bounds you've to use the .off() method and if you only want to attach the event once you can use the .one() method.

jquery click event not working for dynamic fields [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
jQuery - Click event doesn’t work on dynamically generated elements
I just have a clickable add button that adds new table rows. The table rows include a delete button. I've noticed that when I dynamically add a new row the button does not fire the click event, but if the button exists when the page loads, then it works fine. How can I correct this?
Javascript:
$('#btnAdd').click(function () {
var newTr = '<tr><td><input id="column_0" name="column[0]" style="width:40%;" type="text" /> <img alt="Delete-icon24x24" class="btnDel clickable" id="" src="/assets/delete-icon24x24.png" /></td></tr>';
$('#columns').append(newTr);
});
$('.btnDel').click(function () {
alert('hey');
console.log('test');
var row = $(this).closest("tr");
alert(row);
row.remove();
});

You'll need to use event-delegation:
$("table").on("click", ".btnDel", function () {
/* Respond to click here */
});
The reason is that you cannot bind a handler to items that don't presently exist in the DOM. You can, however, bind a handler to a delegate target (a parent element that will remain in the DOM). Clicks will bubble up the DOM, eventually reaching the delegate target.
We listen for clicks on the table and we evaluate whether they came from an .btnDel element. This will now respond to clicks from .btnDel elements loaded when the page loaded, as well as those that are added dynamically later.
Lastly, don't re-use ID values.

You need to use on() for event delegation for dynamically added html elements. You can delegate event to parent element of dynamically added elements if you can or you can delegate to document.
$(document).on('click', '.btnDel', function () {
alert('hey');
console.log('test');
var row = $(this).closest("tr");
alert(row);
row.remove();
});
Delegated events
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, you can use delegated events to
avoid the need to frequently attach and remove event handlers.
For further understanding read this article Understanding Event Delegation

use on()
$(document).on('click', '.btnDel', function(){
//your code
})

This will work
$('#btnAdd').click(function () {
var newTr = '<tr><td><input id="column_0"
name="column[0]"style="width:40%;"type="text" />
<img alt="Delete-icon24x24" class="btnDel clickable" id=""
src="/assets/delete- icon24x24.png" /></td></tr>';
$('#columns').append(newTr);
$('.btnDel').click(function () {
alert('hey');
console.log('test');
var row = $(this).closest("tr");
alert(row);
row.remove();
});
});