removeAttr（'id'）清除#id，但点击仍然有效

Question

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?

Answer 1

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');

Answer 2

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?

Answer 3

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 .

Answer 4

.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');

Answer 5

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.