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!
Related
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
I appended a new element but when I click on it it has no response.
HTML
<button>add element</button>
<div></div>
Javascript
$(function(){
$('button').click(function(){
$('div').append('<span class="x">x</span>');
});
$('.x').click(function(){
alert('fire');
});
});
$(function() {
$('button').click(function() {
$('div').append('<span class="x">x</span>');
});
$('div').on('click', '.x', function() {
alert('fire');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>add element</button>
<div></div>
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the event binding call.
Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.
As you are creating elements.
You need to use Event Delegation. You have to use .on() using delegated-events approach.
General Syntax
$(document).on(event, selector, eventHandler);
Ideally you should replace document with closest static container.
Example
$('div').on('click', '.x', function(){
alert('fire');
});
One cannot bind click events to dynamically generated elements through calling $(".x") when the element does not exist in the document.
One of the solution is to use Event Delegation, which is something like
$(document).on("click",".x",function(){
// do your work here
})
And the other way to do that is do bind the click event to the element when it is generated
$('button').click(function(){
$('div').append($("<span>",{
class: x
}).text("x").click(function(){
// do your work here
}));
});
You're adding the event listener before the item with the x class exists. You want to add that event listener right after you append that span.
$(function(){
$('button').click(function(){
$('div').append('<span class="x">x</span>');
$('.x').click(function(){
alert('fire');
});
});
});
You can not bind events directly to dynamically created elements in jQuery.
Use event-delegation to bind to the dynamically created element's parent:
$(function(){
$('button').click(function(){
$('div').append('<span class="x">x</span>');
});
$('button').on("click", ".x", (function(){
alert('fire');
});
});
For more information on this, see: http://api.jquery.com/on/
I had another issue why the event was not fired.
In my case it was beause of CSS pointer-events was set to none
https://css-tricks.com/almanac/properties/p/pointer-events/
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
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.
I have create dynamic html buttons and I want to set click event to them. Here is my html output and codes :
<td style="width:90px;">
<input type="button" class="btn_Yeni" id="btnYeni"></td>
$(".btn_Yeni").on("click", function () {
alert('asd');
});
$(".btn_Yeni").trigger("click");
Nothing happens after I click the button. Do you have any suggestion?
Since the html buttons are added dynamically, you need to use event delegation to register the event handler like:
// New way (jQuery 1.7+) - .on(events, selector, handler)
$(document).on('click', '.btn_Yeni', function(event) {
alert('asd');
});
UPDATE
Since, the buttons are added to a table cells, as visible in your HTML markup, you can do this:
$('#tableID').on('click', '.btn_Yeni', function(event) {
alert('asd');
});
This will attach your event to any button within the #tableID element,
reducing the scope of having to check the whole document element tree and increasing efficiency.
Since you have dynamic buttons you need to use event delegation.
Just using .on() to register event handlers does not make use of event delegation, it has a very specific format for making use of event delegation. The event should be attached to an element which is already present in the page(like the document object in the below case) then the dynamic element selector has to be passed as the second parameter to the on() method
$(document).on("click", ".btn_Yeni", function () {
alert('asd');
});
This is the approach when using dynamic elements.
$("body").on("click",".btn_Yeni", function () {
alert('asd');
});
How is it done:
the handler is not attached to the element itself ( cuz it does not exists when registering) -
so you attach the handler to the body element. and via event bubbling - the delegate element is checked(against) when it reaches the body ( where the handler is actually attached to).
I have put together a fiddle for you to explore dynamic button additions and using the on method for event delegation.
<ul id="btnCollection">
<li>
<input type="button" class="btn_Yeni" value="Your Button" />
</li>
</ul>
var button = $("#btnCollection:last-child").html();
$("#btnCollection").on("click", ".btn_Yeni", function (event) {
alert("Adding another button");
$("#btnCollection").append(button);
});
http://jsfiddle.net/itanex/yak7c/
DEMOenter link description here
$(document).on("click", ".btn_Yeni", function () {
alert('asd');
});
function addrow(){
var $tr = $("#baserow")
var $clone=$tr.clone();
$tr.after($clone);
}
Im having some problems with .on() and how to use it instead of .bind() in this situation.
What im trying to do here is i click a link and that is supose to bind another click event, but instead it triggers that event right away. I looked in the documentation/jquery.js file and this is how im suppose to do it.
Demo: http://jsfiddle.net/bNaFV/
$('#click_me').on('click', function(){
$('#show_me').addClass('remain');
//this is only suppose to bind that next time i click anywhere on the document it should hide
// not right away
$(document).on('click', 'html', function(){
$('#show_me').hide();
});
});
$("#click_me").hover(
function () {
$('#show_me').show();
},
function () {
if ($('#show_me').hasClass('remain')){
return;
} else {
$('#show_me').hide();
}
}
);
click me<br /><br />
<div id="show_me"></div>
You need to stop the propagation of the event:
$('#click_me').on('click', function(e){
e.stopPropagation(); //Stop the event from bubbling further
$('#show_me').addClass('remain');
$(document).on('click', 'html', function(){
$('#show_me').hide();
});
});
This is because the event has been captured at the #click_me element. You then bind an event handler for that same event type somewhere higher up the DOM tree. The event then continues bubbling up the tree and reaches the document, where it triggers the new event handler.
Here's a working example.
Update (see comments)
As noted by #zerkms in the comments, I think you probably only want to bind the event handler to document once. You could use the one method to do so, which unbinds the event handler after it's been executed once:
$(document).one('click', 'html', function(){
$('#show_me').hide();
});