11

我正在为一个客户做一些事情，一个代理机构已经构建了一点 jQuery 来触发一个 DoubleClick Floodlight 代码，但由于某种原因该代码不起作用：

<script type="text/javascript">
$(function () {

    //var origOnClick = $('#trackingButton').attr("onclick");
    $('#trackingButton').click(fireFloodlight);
    function fireFloodlight() {
        if (Page_IsValid) {
            var axel = Math.random() + "";
            var a = axel * 10000000000000;
            $("body").append('<img src="https://ad.doubleclick.net/activity;src=2499215;type=axa_l124;cat=lpg_g263;ord=' + a + '?" width="1" height="1" alt=""/>');
            //eval(origOnClick);
        }
    }

});
</script>

对我来说，这个脚本看起来不错，但在实时环境中，ad.doubleclick.net从来没有调用过“”？任何帮助将非常感激。奇怪的是，标签一直工作到本周末，但现在没有记录任何动作？

编辑：我做了一个console.log(Page_IsValid)返回的True.

编辑：这是相关按钮的 HTML：

<input type="submit" name="ctl00$ctl00$ctl00$BodyPlaceHolder$BodyPlaceHolder$WizardContentPlaceHolder$WizardCollectBasicSMEInfo$trackingButton" value="Get your quick quote" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ctl00$ctl00$BodyPlaceHolder$BodyPlaceHolder$WizardContentPlaceHolder$WizardCollectBasicSMEInfo$trackingButton&quot;, &quot;&quot;, true, &quot;Form&quot;, &quot;&quot;, false, false))" id="trackingButton" class="button" />
4

8 回答 8

6

您已经准备好文档上的函数，您的问题是您以错误的方式调用该函数，如果您想这样调用该函数，您应该将其声明为函数表达式（有关更多信息，请参阅此链接中的函数表达式):

$(function () {

var fireFloodlight = function()  {
    if (true) {
        var axel = Math.random() + "";
        var a = axel * 10000000000000;
        $("body").append('<img src="http://tejedoresdesuenos.com.mx/wp-content/uploads/2011/06/google.jpg" width="50" height="10" alt=""/>');
        alert('ello');
    }
}

$('#trackingButton').click(fireFloodlight);


});

一个工作示例。

于 2012-11-05T23:00:57.410 回答
3

尝试这个：

        //var origOnClick = $('#trackingButton').attr("onclick");
        $('#trackingButton').live("click", function(){

            if (Page_IsValid) {
                var axel = Math.random() + "";
                var a = axel * 10000000000000;
                $("body").append('<img src="https://ad.doubleclick.net/activity;src=2499215;type=axa_l124;cat=lpg_g263;ord=' + a + '?" width="1" height="1" alt=""/>');
                //eval(origOnClick);
            }
         });
于 2012-10-31T17:10:19.657 回答
3

如果此代码在head您的 HTML 文件的标记中，它将无法正常工作。JavaScript 将在页面完成呈现之前尝试执行。因此，当代码执行时，input根据解析器，标签将不存在。您可以将它放在文档就绪函数中，或者您可以简单地将script标签放在 HTML 文档的末尾（结束body标签之前）。

<script type="text/javascript">
    $(document).ready(function () {
        $('#trackingButton').click(fireFloodlight);
        function fireFloodlight() {
            if (Page_IsValid) {
                var axel = Math.random() + "";
                var a = axel * 10000000000000;
                $("body").append('<img src="https://ad.doubleclick.net/activity;src=2499215;type=axa_l124;cat=lpg_g263;ord=' + a + '?" width="1" height="1" alt=""/>');
            }
        }
    });
</script>

此外，除非您fireFloodlight在其他 onclick 函数中使用该函数，否则您可以将其作为匿名函数传入。

<script type="text/javascript">
    $(document).ready(function () {
        $('#trackingButton').click(function() {
            if (Page_IsValid) {
                var axel = Math.random() + "";
                var a = axel * 10000000000000;
                $("body").append('<img src="https://ad.doubleclick.net/activity;src=2499215;type=axa_l124;cat=lpg_g263;ord=' + a + '?" width="1" height="1" alt=""/>');
            }
        });
    });
</script>

最重要的是，如果您使用的是最新版本的 jQuery，您需要.on()使用.live(),.delegate()或.click(). 前两个现在在最新版本的 jQuery 中在技术上已被弃用（尽管我非常怀疑它们会在一段时间内被删除）并且，如果我没记错.click()的话，它.on()只是.on().

我会给你两个例子来说明如何使用.on().

第一个示例是在#trackingButton最初加载页面后简单地将事件添加到元素。

<script type="text/javascript">
    $(document).ready(function () {
        $('#trackingButton').on('click',function() {
            if (Page_IsValid) {
                var axel = Math.random() + "";
                var a = axel * 10000000000000;
                $("body").append('<img src="https://ad.doubleclick.net/activity;src=2499215;type=axa_l124;cat=lpg_g263;ord=' + a + '?" width="1" height="1" alt=""/>');
            }
        });
    });
</script>

这里的第二个示例通过将事件附加到父元素并在bubbles将 DOM 向上传递到父元素之后执行函数来工作，并且目标元素与第二个参数中提供的选择器匹配。它通常用于将事件附加到可能在初始加载后动态添加/删除/重新添加到页面的元素。

<script type="text/javascript">
    $(document).ready(function () {
        $(document).on('click','#trackingButton',function() {
            if (Page_IsValid) {
                var axel = Math.random() + "";
                var a = axel * 10000000000000;
                $("body").append('<img src="https://ad.doubleclick.net/activity;src=2499215;type=axa_l124;cat=lpg_g263;ord=' + a + '?" width="1" height="1" alt=""/>');
            }
        });
    });
</script>

我希望这些例子有帮助！

于 2012-10-30T20:03:27.220 回答
2

此代码触发onclick事件以及绑定到选择器的click事件：#trackingButton

您可以移动onclick事件以触发函数，而不是使其内联：

<input type="submit" onclick="myPostBack()" name="ctl00$ctl00$ctl00$BodyPlaceHolder$BodyPlaceHolder$WizardContentPlaceHolder$WizardCollectBasicSMEInfo$trackingButton" value="Get your quick quote" id="trackingButton" class="button" />

....然后是js：

function myPostBack() {
/*
    WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl00$ctl00$BodyPlaceHolder$BodyPlaceHolder$WizardContentPlaceHolder$WizardCollectBasicSMEInfo$trackingButton", "", true, "Form", "", false, false))
*/
    alert("postback executed")
}

注意：我设置了一个警报作为示例，以验证该myPostBack功能是否已执行。

如果WebForm_DoPostBackWithOptions未执行，请检查您是否有语法错误（使用&quot;触发器 js 错误）并且您传递了正确的参数...检查此以获取更多信息。

...js（继续）

function fireFloodlight() {
    if (Page_IsValid) {
        var axel = Math.random() + "";
        var a = axel * 10000000000000;
        $("body").append('<img src="https://ad.doubleclick.net/activity;src=2499215;type=axa_l124;cat=lpg_g263;ord=' + a + '?" width="1" height="1" alt=""/>');
        //eval(origOnClick);

        // append another image for verification purposes
        $("body").append('<img src="http://www.devaldi.com/wp-content/uploads/2009/10/jquery-logo.gif" alt="jquery" />')
    }
}

$(function() {
  // using .on() requires jQuery 1.7+
    $('#trackingButton').on("click", function() {
        fireFloodlight();
    });
});

假设那Page_IsValid应该true可以工作...查看 JSFIDDLE示例...如果一切顺利，您应该会看到回发警报以及 jQuery 图像；）

于 2012-11-04T22:01:02.203 回答
2

您实际上已经为同一个事件分配了两个事件处理程序给同一个元素。据我所知，这应该是不可能的。

此外，您应该将函数调用包装在匿名函数中，如下所示：

$('#trackingButton').click( function() {

    fireFloodlight();

});

您可能希望避免直接在 HTML 标记中分配事件处理程序，这通常被认为是一种不好的做法。

确保您的 #trackingButton 在您调用时已存在于 DOM 中，尝试为其分配点击事件处理程序。

还要确保控制台日志中没有错误，并且在您尝试分配事件处理程序时没有其他插件或脚本正在修改 DOM。

于 2012-10-30T11:04:01.753 回答
2

您的 html 节点具有显式onclick属性，根据您的代码，该属性未停用。

做什么WebForm_DoPostBackWithOptions？如果在某些配置中，此函数返回false，它将阻止调用其他处理程序。

如果您可以对生成 html 的代码采取行动，我建议您onclick从节点中删除此属性，并将其声明为 jquery click 处理程序。

于 2012-10-31T10:01:25.253 回答
1

提交按钮可能正在触发请求，因此您永远看不到图像被添加到正文中。 event.preventDefault()可能会解决这个问题。 

$('#trackingButton').click(function(event) {
    event.preventDefault();
    if (Page_IsValid) {
        var axel = Math.random() + "";
        var a = axel * 10000000000000;
        $("body").append('<img src="https://ad.doubleclick.net/activity;src=2499215;type=axa_l124;cat=lpg_g263;ord=' + a + '?" width="1" height="1" alt=""/>');
        //eval(origOnClick);
    }
}
于 2012-11-06T07:10:56.050 回答
1

你如何添加你的#trackingButton？如果您是通过 jQuery 执行此操作，请使用on而不是click 

 $('body').on('click','#trackingButton',function(){
      console.log("Page_IsValid: "+Page_IsValid);
      if (Page_IsValid) {
        var axel = Math.random() + "";
        var a = axel * 10000000000000;
        $("body").append('<img src="https://ad.doubleclick.net/activity;src=2499215;type=axa_l124;cat=lpg_g263;ord=' + a + '?" width="1" height="1" alt=""/>');
      }
    });

Page_IsValid 应该是 true，并且你的 img 应该被添加到 DOM 中。

它奏效了吗？

于 2012-10-25T11:07:22.197 回答