how to stop the event of the class without refreshing

Question

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 <a href="#" id="remove"><img src="images/remove.png" /></a></span>');
        });
       e.preventDefault();
    });

score 1 · Answer 1 · answered Mar 10 '15 at 07:04

1

Try this:

$('#task tbody tr.view_task').unbind();

or if you only want to remove click event

$('#task tbody tr.view_task').unbind("click");

answered Mar 10 '15 at 07:04

Rohit Arora

2,246
2
24
40

Satpal · Answer 2 · 2015-03-10T07:12:29.473

$('#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
})

score 1 · Accepted Answer · edited May 23 '17 at 12:29

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)?

@RajaManickam - the easiest way is to use delegated event handling and when a row is clicked, remove a class in the event selector from the current row. — jfriend00, Mar 10 '15 at 07:18

score 1 · Answer 4 · answered Mar 10 '15 at 07:12

1

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

answered Mar 10 '15 at 07:12

Amit

827
10
17

guest271314 · Answer 5 · 2015-03-10T07:24:46.037

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

how to stop the event of the class without refreshing

5 Answers5