I have the <div id="SocialInteract">
$('#SocialInteract').click(function() {
$('#SocialCount').load('sc.php');
$('#TeacherAttendance').removeAttr('id');
});
When I view the InspectElement the #id is removed but it still takes the click. Something I am doing wrong?
Your click event still fires because the event is already attached to the TeacherAttendance element.
If you want to detach the click event, you should use off() or unbind() :
$('#TeacherAttendance').off('click');
$('#TeacherAttendance').unbind('click');
Removing id wont remove already attached click event. Use unbind() method to remove attached event.
$('#TeacherAttendance').unbind("click");
EDIT :
You should use off() as its the updated one. unbind() is still there for backword compatibility
$('#TeacherAttendance').off('click');
Related question : Best way to remove an event handler in jQuery?
You are binding to the DOM element the event, then you remove the id but the event it's already registered.
use off or unbind or set a global var to turnoff/remove/doNothing .
.click() just attaches and forgets. It doesn't care whether anything happens to that element.
So you've to manually unbind the event.
.unbind('click');
To make the event binding dynamic, attack it to the document and wait for it to bubble up:
$(document).on('click', #SocialInteract', function() {
$('#SocialCount').load('sc.php');
$('#TeacherAttendance').removeAttr('id');
});
This way the event is registered to the document node: if the click event was fired on an element that had that ID, it will trigger. If not, it won't.
Related
My understanding is that when using the unbind and off jQuery methods, I should be able to remove an event handler from an element as follows
The textbox created in the view, with an onkeypress event handler applied
#Html.TextBoxFor(Function(m) m.sometext, New With {.onkeypress = "eventhandler();", .id = "theID"}
The JavaScript which is trying to remove the event
function eventhandler()
{
alert("should only hit once");
// this doesnt unbind the event
$("#theID").unbind("onkeypress");
// Nor does
$("#theID").off();
//???
}
My thinking could be that the unbind only works with bind and the off only works when on is used. I say this as the jQuery API website states
The .off() method removes event handlers that were attached with .on()
If this is the case, can I not apply the handler in the view at all?
I'd like to add I want to do this in the view and I want to apply a unique ID which is from the ViewModel
Any help would be helpful
Thanks
You can use either removeAttr()
$('#theID').removeAttr('onkeypress');
or set the event handler to null
$('#theID'')[0].onkeypress = null;
Need to get info from any element, which was clicked.
Example:
<div>text1<section>text2</section></div>
and JS
$(function(){
$('body *').click(function(){
alert($(this).get(0).tagName.toLowerCase());
});
});
If I click text2, parent element throw alert too. I need only first alert from section. How I can block next alerts from all parent elements of section.
Use event.stopPropagation() to prevent the event from firing on the containing elements.
$(function(){
$('body *').click(function(e){
e.stopPropagation();
alert($(this).get(0).tagName.toLowerCase());
});
});
Just wanted to expand on Kooilnc answer - Using on with event delegation is another option.
Event delegation would be nice if you have an event listener bound before or after on a node that needs to listen to a click handler that has bubbled up. If you stopPropagation, this obviously would be an issue.
Here's a fiddle with a demo:
http://jsfiddle.net/ahgtLjbn/
Let's say a buddy of yours has bound an event listener to a node higher up in the DOM tree. He expects any events that bubble up to it, to be handled by his script.
Using event delegation, the event still bubbles up (so your buddies code will still fire), but it will only alert once (since we called e.stopPropagation).
Calling on without event delegation, or binding the event directly using click (which, under the hood, is just calling on) will prevent the event from bubbling, so your buddies code will never run.
I have a dynamically loaded button created when the document loads. After this, I attach a click handler to this button. When I try to remove the handler with .off(), it does not work.
This snippet creates the click handler and removes it. However, when I click the button, the function StartMash still executes.
$(document).on("click", "#mash-idle-start", StartMash);
$("#mash-idle-start").off();
Obviously this is not the functionality I am trying to achieve, but the problem persists through this simple example
because the event handler is not attached to #mash-idle-start, it is attached to document so
$(document).off("click", "#mash-idle-start", StartMash);
or
$(document).off("click", "#mash-idle-start");
Note: When working with event unbinding, try to use event namespaces as you will have more control over which handlers are removed.
I am a bit confused, I have a bunch of elements that get added via jquery using a ajax call and I want to attach a click handler to them (there could be a lot).
But I have no idea how to even begin this, I looked at .on and it is really confusing. I want to attach a click event handler for a certain class so that when I click on it, I get the this.id and then do stuff with it.
What you're trying to do is called event delegation.
You want to set the event listener on a higher element in the DOM that'll never change, but only fire off the event handler if the child element that has been clicked matches a specific selector.
Here's how it's done with jQuery's .on():
$(document).on('click', '.your-selector', function(){
alert(this.id);
});
P.S. You could probably apply the event listener to an element lower down in the DOM tree...
This will get you the id of a clicked element with the class "test"...
$(".test").on("click", function() {
var id = $(this).attr("id")
});
You'll need to run that after the ajax call returns. It will only bind the click event to elements that exist when it runs, so it's no good at document.ready.
I want to close the div if someone clicked outside that div. I have the below code:
$('body').click(function(e) {
$('div.test').slideUp('slow');
});
$('div.test').live('click',function(e) {
e.stopPropagation();
});
But the issue is that when someone click inside the div, the div itself is closing. I want to prevent that. After debugging I found a weird stuff the debugger is hitting the $(body).click first instead of $(div.test), May I know the reason for this? Can you help me in fixing the issue?
The problem is with your use of live.
live is a way of saying "bind a handler to the root element and capture any events that originated on an element matching a selector". It's a short form of delegate. This is possible because of "bubbling": events on elements are triggered on the element's ancestors as well.
If you do not specify otherwise, live binds the event handler to the document. The event handler on the body will be triggered first since the event won't have bubbled up to the document handler, where the e.stopPropagation() is.
The easiest solution would be to change live to click:
$('div.test').click(function(e) {
If you need to use live, introduce a container element, and handle the event there. I'll use delegate as I prefer its syntax, but you could use live if you preferred:
$('#container').delegate('div.test', 'click', function(e) {
e.stopPropagation();
});
The event is handled on #container and propagation is stopped, so the event never reaches the body's event handler.
What happens if you handle the body click with live() too?
I believe the live click handler doesn't propagate the event in the same way as a standard click. See this documentation.
I believe the problem arises because you are setting a click handler to <body>
I tried the same thing with <p> instead of <body> and it seems to work fine.
Here's a relevant fiddle:
http://jsfiddle.net/seNXV/7/
live() does not stop propagation. Says do in the jQuery docs.
You need to use delegate()