由自定义事件触发的 ajax 调用保留以前调用的数据

Question

大家早上好，我在使用 jquery 开发的跟踪系统时遇到了问题。这背后的主要思想是让处理程序绑定到许多可以单击的元素，一旦单击处理程序，就会获取有关单击的元素的代码，并对记录代码和时间的 php 脚本进行 ajax 调用。

这工作正常，但突然间我意识到页面上的元素通常没有任何 id、名称或类（或任意类），这些是我想要“跟踪”的属性。 因此，由于大多数时候这些匿名页面元素都有一个处理其行为的 javascript，所以我考虑了一个事件触发器，将其放入那些应该触发我的跟踪 javascript 的 javascripts 中。

我的部分问题是这些页面、javascript 等大部分都是不可触碰的，所以我必须在不触碰任何东西（或几乎任何东西）的情况下集成这个跟踪。

现在，一些代码，这是 ajax 调用本身：

function XJAX(strUrl,kpi,isAsync) {

        if (isAsync == "true") {isAsync = true;} else {isAsync = false;}
        console.log("xjax called");
        xhr = $.ajax({
            url: strUrl,
            type: 'GET',
            cache:false,
            data: { kpiName: kpi },
            contentType: "application/json; charset=utf-8",
            dataType: "jsonp",
            jsonp: "callback",
            jsonpCallback: "callbackLog",
            async:isAsync
        });

        if(isAsync == false){
            setTimeout(function(){
                try{
                    xhr.abort();
                    console.log("xhr aborted");
                }catch(e){}

            },800);
        }       
    }

这是一个 jsnop 结构，用于从中获取一些数据：

kpiList = $.parseJSON('{"idkpi":{"termkk":{"kpi":"id1111termkk","asynk":"true"}, "termww":{"kpi":"id2222termww","asynk":"false"}, "secondClick":{"kpi":"id8888secondClick","asynk":"true"}, "firstClick":{"kpi":"id7777firstClick","asynk":"false"} }, "classkpi":{"birms":{"kpi":"cl3333","asynk":"false"},"gurp":{"kpi":"cl4444","asynk":"true"} },"namekpi":{"genericLink":{"kpi":"na55555","asynk":"false"},"anotherThing":{"kpi":"na66666","asynk":"true"} }}');

现在我已经编写了这个应该跟踪自定义事件的处理程序：

$(document).bind('trackme',function(eventFire,elementToBeTracked){
        console.log('track ' + elementToBeTracked);
        kpiN = false;
        asynk = true;
        try{
            kpiN = kpiList["idkpi"][elementToBeTracked]["kpi"];
            asynk = kpiList["idkpi"][elementToBeTracked]["asynk"];  
            if (!kpiN){
                kpiN = kpiList["namekpi"][elementToBeTracked]["kpi"];
                asynk = kpiList["namekpi"][elementToBeTracked]["asynk"];    
            }

            if (!kpiN){
                kpiN = kpiList["classkpi"][elementToBeTracked]["kpi"];
                asynk = kpiList["classkpi"][elementToBeTracked]["asynk"];   
            }

            if((typeof kpiN !== 'undefined') && (kpiN !== '')){
                XJAX(url,kpiN,asynk);   
            }   
        }catch(e){}
});

在这种情况下：

<button id="first" type="button">first click</button>
<button id="start" style="display:none" type="submit">second click</button>




$(document).ready(function(){
            $('#first').click(function() {
                $(document).trigger( "trackme",  "firstClick"  );
                $('#first').hide();
                $('#start').show()
            });
            $('#start').click(function() {
                $(document).trigger( "trackme",  "secondClick"  );                
            });

        });

发生这种情况： 第一次单击正确触发调用，ajax 调用触发远程脚本，所有内容都记录在“firstClick”的名称下。

第二次点击，从第一次调用返回一些参数，返回一个空对象，然后记录正确的调用，但没有调用，也返回一个空对象。

--------first click is done-------------
track firstClick 
Object {readyState: 1, setRequestHeader: function, getAllResponseHeaders: function, getResponseHeader: function, abort: function…} <---- this is a full object, all works fine
xjax called 
Resource interpreted as Script but transferred with MIME type text/html: "a server"
xhr aborted 
-----------end---------------

----------second click--------
xjax called
Object {readyState: 1, setRequestHeader: function, getAllResponseHeaders: function, getResponseHeader: function, abort: function…} <---- empty object

track secondClick
xjax called 
Object {readyState: 1, setRequestHeader: function, getAllResponseHeaders: function, getResponseHeader: function, abort: function…} <---- empty object
---------end------------------

在另一个文件，即日志中，我发现了两次点击的 id，而不是第二次点击的 id。

“中止”是我试图处理同步调用和浏览器阻塞的事情，这样我就有机会不阻塞太多。

奇怪的是，第二次调用保留了第一次调用的一些数据，这与在没有触发函数的情况下调用 xjax 时的行为不同。

应该是与事件有关的东西吗？我的意思是，也许我必须在处理程序被trigger() 解雇后重置它？

有人对此有想法吗？

Answer 1

据我所知（这是一个相当随机的故事），您正在寻找 id、name 或 class。 你把它们放在一个变量中，如果按下，你就会发出一个 AJAX 调用。 你的问题是：为什么你会得到任意名称和其他数据。

难道类不是唯一的吗？所以当你调用一个类时，它可以被共享，从而请求另一个。它会解释任意名称，因为您正在请求课程而不知道您需要哪个课程（据我所知）。

您最好添加一个 data-trackid。这样您就可以控制 id 是什么，并且您可以随时返回到您需要的那个。更重要的是，它是独一无二的，这就是跟踪的全部意义所在。