Question

我正在使用JQuery和ajax。

情景： 场景如下。我有一个具有不同功能的表，每行都有自己的按钮来调用“显示数据”功能。在第一次调用时，我检查了一些操纵原始数据的微服务。如果数据可用，我会在图表中显示每个操纵数据的按钮。每个Button都会获得一个在ajax调用的de success方法中创建的侦听器。因此可以有三种情况：

首先：显示数据是第一次调用。所以没有   Eventlistener创建了。在那种情况下，我为每个创建一个新的   按钮。

第二：想象一下，我点击了一个按钮，在图表中显示数据。后   那个，图表关闭了。现在我想再次显示相同的数据。   所以我的Eventlistener应该保持不变，不应该   另一个补充说。

第三：我点击表中可能有数据的另一个功能   被操纵的方式不同或将在另一个图表中显示（例如馅饼   流程图的图表。）因此情景非常类似于   case one但现在有一个旧的Listener要删除。

作为总结：我必须在获取createt时保存Eventlistener对象persistend，因为当案例3出现时，我想调用removeEventlistener但是我得到一个错误，该对象未定义：

我是js中的总菜鸟。此方案导致问题，即事件参数未更新，您可以看到侦听器的数据输出弹出一秒钟并被更新的覆盖。当你做一些尝试时，它会在没有任何东西的混乱中结束。我的意思是错误的数据显示在错误的图表中（旧的事件之一）。所以我想删除旧的侦听器并重新创建它。这是一个可能的解决方案还是有更好的方法来做到这一点？

整个功能看起来像这样：

function showData（id，category，feature，date，caller，already_called）{

    document.getElementById("originButtonDiv").style.visibility='visible';
    document.getElementById("squareButtonDiv").style.visibility='hidden';




    try{
        //show data again -> maintain listener
        if(old_already_called == 0 && already_called == 1){
            old_already_called = already_called;
        }
        //New feature choosen -> Delete old listener and create new one
        if(old_already_called == 1 && already_called == 0){
            $.ajax({
                  type:'GET',
                  url:"${path}/user/...
                  dataType:'text',
                  async: false,
                  success:function genTable(data){      

                            var originDataButton = document.getElementById("originDataButton");
                                //originDataButton.removeEventListener("click",_listener,true);
                                originDataButton.addEventListener("click", function _listener(){
                                originDataButtonClicked(id,category,feature,date);                                                              
                                }, true);



                  if(data.localeCompare("true")==1){                
                              document.getElementById("squareButtonDiv").style.visibility='visible';    
                                var squaredDataButton = document.getElementById("squaredDataButton");
                                    //squaredDataButton.removeEventListener("new_click",_squared_listener,true);                                                
                                    squaredDataButton.addEventListener("click",function _squared_listener(){
                                    squaredDataButtonClicked(id,category,feature,date);                     
                                    }, true);   
                        }
                  }
            });
            old_already_called = 0;
        }
    }
    catch{
        //first call --> create new Eventlistener
        $.ajax({
          type:'GET',
          url:"${path}/user/...
          dataType:'text',
          async: false,
          success:function genTable(data){      

                    var originDataButton = document.getElementById("originDataButton");
                        originlistener = originDataButton.addEventListener("click", function _listener(){
                        originDataButtonClicked(id,category,feature,date);  
                    }, true);





                  if(data.localeCompare("true")==1){                
                      document.getElementById("squareButtonDiv").style.visibility='visible';    
                        var squaredDataButton = document.getElementById("squaredDataButton");                                           
                            squaredDataButton.addEventListener("click",function _squared_listener(){
                            squaredDataButtonClicked(id,category,feature,date);                     
                            }, true);   
                }
          }
        });

        old_already_called = 1;
    }

}

更新我现在很确定问题是使用ajax。我为我的用例定义了一个逻辑树，因为我必须检测是否应该创建Eventlistener，保持不变或删除并重新创建。我想我可以在我的代码中区分这些情况，但问题是，我在ajax success方法中定义了监听器。在两次调用之间，侦听器未定义。那么是否有可能在客户端之间保存一个监听器对象到ajax调用之间，以便我可以在将来的调用中删除它？我想这可以解决我的问题。

JS重新创建eventlistener

0 个答案: