jQuery的.append（）的形式提交像素 [英] jQuery .append() a pixel on form submit

问题描述

我有一个格式有一个的onsubmit 函数调用尝试一些转化像素添加到页面使用 .append（）。

I have a form that has an onsubmit function call that attempts to add a few conversion pixels to the page using .append().

形式提交被解雇，并重定向用户关闭该页面的像素有机会火（所示为镀铬网络调试器取消的请求）之前。

The form submit is firing and redirecting the user off the page before the pixels get a chance to fire (shows as a cancelled request in chrome network debugger).

我已经尝试了一些事情的setTimeout（）等，但我似乎无法得到任何工作。

I have tried a few things with setTimeout() etc, but I can't seem to get anything working.

我知道我可以使用的onclick 事件与回车键检查相结合，然后提交一个的setTimeout 调用。然而，这似乎有点哈克。

I know I could use an onclick event combined with a check for enter key, then submit the form on a setTimeout call. However, this seems somewhat hacky.

另外，我没有访问到的表单提交页面。添加像素这个页面是不可能的。

Also, I do not have access to the page which the form is submitted to. Adding the pixels to this page is not possible.

有没有更好的方法？

推荐答案

我觉得追踪转换的最佳选择是从表单提交后显示的页面请求这些像素。但是，如果你有超过该页面无法控制，这里有云：

I think the best option to track conversion is to request these pixels from the page displayed after your form has been submitted. But if you have no control over that page, here goes:

$('form').submit( function(e){
    e.preventDefault(); // do not submit the form just yet
    var $t = $(this), 
        trackingUrl = 'http://placekitten.com/20/10'; 
        $('<img />')
            .on('load', function(){ // when the image loads...
                $t.unbind('submit')  // ...unbind the event listener preventing an endless loop
               .submit() // and submit the form
        }).attr('src', trackingUrl );
});

编辑：你也应该在跟踪图像无法加载的情况下添加一些precautions（例如onerror事件），否则表单不会得到在所有提交的

you should also add some precautions (for example onerror event) in case of the tracking image failing to load, otherwise the form won't get submitted at all.

这篇关于jQuery的.append（）的形式提交像素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！