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

how to stop the event of the class without refreshing

本文关键字:事件 情况下 刷新      更新时间:2023-09-26

我已经将事件用于整行,并在页面任务中执行了ajax的某些功能.php并更改了样式删除了类并显示消息而不刷新页面。即使我已经删除了该类view_task它仍在工作并执行如何防止它的功能。并且还用切换类(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();
    });

安装如下事件处理程序时:

$('#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 事件处理程序 - 什么是"最佳"方法

jQuery .live() vs .on() 方法用于在加载动态 html 后添加点击事件

jQuery.on() 是否适用于创建事件处理程序后添加的元素?

jQuery 选择器在动态添加新元素后不更新

是否应该将所有 jquery 事件绑定到 $(document)?

试试这个:

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

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

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

你需要解绑或关闭.view_task类的事件

例:

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

$('#task tbody tr.view_task').unbind('dblclick');
$('#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')
    });    
});    

或者,您可以使用 .on() 委托事件方法使用事件委派

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

尝试

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