如何在没有刷新的情况下停止类的事件

时间:2015-03-10 07:00:40

标签: javascript jquery ajax class innerhtml

我已经在整个行中使用了该事件,并在页面task.php中通过ajax执行了一些功能,并更改了删除该类的样式并显示了消息而没有刷新页面。 尽管我已经删除了类view_task,但仍然可以使用它并执行如何防止它的功能。并且还使用toggle类更改了类(jquery函数

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

5 个答案:

答案 0 :(得分:1)

试试这个:

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

或者如果您只想删除点击事件

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

答案 1 :(得分:1)

$('#task tbody tr.view_task').dblclick(function(e){});

上面的语句发现元素将事件与它们绑定,如果删除selector它将没有任何影响。

您可以使用.off()删除事件处理程序。

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

,您可以Event Delegation使用.on()委托事件方法使用{{3}}。

$('#task tbody').on('dblclick', 'tr.view_task', function(e){
    //Your code
})

答案 2 :(得分:1)

安装这样的事件处理程序时:

$('#task tbody tr.view_task').dblclick(function(e){

它最初安装,无论您对该对象进行何种类更改,它都将保留在对象上。

如果您希望事件处理程序是动态的并随着类的更改而更改,那么您需要使用.on()的委托形式,如下所示:

$('#task tbody').on("dblclick", "tr.view_task", function(e){...});

这实际上将事件处理程序附加到#task tbody,然后每次dblclick事件冒泡到该元素时,它将检查它是否源自具有"tr.view_task"的元素。这将允许它仅在相应的类仍在单击的对象上时才会响应。

有关委派事件处理的其他信息,请参阅这些参考资料:

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

答案 3 :(得分:1)

您需要取消绑定或关闭.view_task类

的事件

示例:

$('#task tbody tr.view_task').off('dblclick');

OR

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

答案 4 :(得分:1)

尝试

$("#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