0

I have a <td> which contains a <span> tag. The td tag has a click event and the <span> tag has an id. On clicking the span, I want to disconnect the click event of the <td> tag. How do I do by referring to the span tag?

<Table>
    <tr>
        <td onClick="disconnectHandler();"><span id="testin">Hello</span></td>
    </tr>
</Table>

This is what my JavaScript has :

function disconnectHandler()
{
    alert("Hi Hello");
    $("#testin").parent().unbind();
}

It keeps showing the alert box. What is wrong with this code?

Additionally, i want to attach the click event to it later too after removing it!

Avdhut Vaidya
  • 314
  • 2
  • 13

3 Answers3

2

The first unbind scenario doesn't work, because of jQuery's event model. jQuery stores every event handler function in an array that you can access via $("#foo").data('events'). The unbind function looks just for given function in this array. So, you can only unbind() event handlers that were added with bind()

Reference.

Working fiddle.

You couldn't use unbind but you could remove the onclick attribute using prop():

function disconnectHandler()
{
  alert("Hi Hello");
  $("#testin").parent().prop('onclick',null);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td onClick="disconnectHandler();"><span id="testin">Hello</span></td>
  </tr>
</table>

If you want to disable the click after first click it will be better to use one(), check the example below.

Description : one() Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

Hope this helps.

$(function(){
  $('body').one('click', '#testin', function(){
    alert("Hi Hello");
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td><span id="testin">Hello</span></td>
    </tr>
</table>
Community
  • 1
  • 1
Zakaria Acharki
  • 66,747
  • 15
  • 75
  • 101
  • i cannot add the event at run time.. i should only disconnect it at run time. The HTML of the event is already present so i have to keep as it is – Avdhut Vaidya Aug 17 '16 at 16:11
  • @ZakariaAcharki I saw, that is why i remove my comment ;) – Chax Aug 17 '16 at 16:36
  • Finally, i went your way!.. i earlier had an HTML which had it's event attached in the tag itself.. i learnt here that since bind() is not used, unbind() wont' wrk.. so i updated the original HTML, used $.ready(document) and binded the click to the td tag.. now i am using the bind and unbind() to attach & detach events – Avdhut Vaidya Aug 21 '16 at 08:27
1

This will bind a click event only once on the td element 

$(document).ready(function() {
    $('#testin').one('click', function(){
         alert('Hello there');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <td><span id="testin">Hello</span>
    </td>
  </tr>
</table>

EDIT

The main difference between my answer and Zakaria's reside in the fact the he can add more span later on (if you use class instead of id that is).

$('body').one('click', '#testin', function(){}); Binds all #testin inside body to a click event.

$('#testin').one('click', function{}); Binds all #testin that are already on the document to a click event.

EDIT 2

to answer your question:

It keeps showing the alert box. What is wrong with this code?

You haven't binded an event to the td element, every time it is clicked it call a function name disconnectHandler().

function doSomething() {
  alert('alerted')
  }

function removeEvent() {
  document.getElementById('doer').removeEventListener('click', doSomething);
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p id="doer" onclick="doSomething()">Click me</p>

<p id="undoer" onclick="removeEvent()">Remove his event</p>

As you can see, the so-called event is part of his DOM. You are not removing the attribute, that is why it still call the function

Community
  • 1
  • 1
Chax
  • 1,041
  • 2
  • 14
  • 36
  • this didn't work.. i ran this code from within this page itself "Run code Snippet" and even if i click "Remove his event", it still gives alert on clicking "Click Me" – Avdhut Vaidya Aug 18 '16 at 06:49
  • 1
    If you ran the snippet inside my **edit2** it is normal that it didn't work. It was a proof of the event being inside an attribute rather than inside an event object – Chax Aug 18 '16 at 12:31
0

this can also be tried

function disconnectHandler()
{
    alert("Hi Hello");
    $("#testin").parent().attr('onclick',"")
}
Akshay
  • 815
  • 7
  • 16
  • this did work.. however, jQuery has beautified with it's library and provides so many functions to attach and detach function pointers based on multiple criteria; how did it not work that way.. but for mi, this worked :) – Avdhut Vaidya Aug 17 '16 at 16:38
  • yeah you r right but what i think the onclick handler remains in the html and you were unbinding it but still.it had its existence into html.so that's why, i guess but i m not sure...again its my understanding – Akshay Aug 17 '16 at 16:44
  • No.. it does not wrk that way.. even if it is bound in the HTML's tag, when you use the unbind() or removeEventListener(), it is actually supposed to update this HTML.. this can be tracked from chrome's or IE's developers tools.. the argument that since the event is bound from HTML's tag does not hold good that it is the reason for not getting unbound.. For example.. see the HTML updating at run time when you are using jQuery's various ui related events.. – Avdhut Vaidya Aug 18 '16 at 06:55
  • ok.. after saying what i said earlier.. i also read another post in this question.. that UnBind can only Unbind such event which is binded using bind().. so that too is an issue in my code – Avdhut Vaidya Aug 18 '16 at 07:05