Question

我正在为客户工作，而且代理机构已经构建了一小部分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" />

Answer 1

你已经准备好了文档中的函数，你的问题是你正在以错误的方式调用函数，如果你想调用函数，你应该将它声明为函数表达式（see Function Expressions in this link for more info）：

$(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);


});

工作example。

Answer 2

如果此代码位于HTML文件的head标记中，则无法正常运行。 JavaScript将在页面完成呈现之前尝试执行。因此，当代码执行时，根据解析器，input标记将不存在。您可以将其放在document ready function中，也可以将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>

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

<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向上移动到父元素之后执行该函数来工作，并且目标元素与第二个参数中提供的选择器匹配。它通常在将事件附加到可能在初始加载后动态添加/删除/重新添加到页面的元素时使用。

<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>

我希望这些例子有所帮助！

Answer 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);
            }
         });

Answer 4

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

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

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

    fireFloodlight();

});

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

在调用try为其指定click事件处理程序时，请确保您的#trackingButton已存在于DOM中。

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

Answer 5

您的html节点有一个明确的onclick属性，根据您的代码，该属性未被停用。

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

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

Answer 6

此代码同时触发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没有被exectuded，请检查您是否没有语法错误（使用"触发器js错误）并传递正确的参数... check this以获取更多信息。

... 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，那应该有效...... SEE JSFIDDLE示例......如果一切正常，你应该看到回发警报以及jQuery图像;）

Answer 7

如何添加#trackingButton？如果你是通过jQuery进行的，请使用 on 而不是点击

 $('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中。

有效吗？

Answer 8

提交按钮可能会触发请求，因此您永远不会看到正在添加到正文中的图像。 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);
    }
}

此代码似乎没有触发此按钮。出了什么问题？

8 个答案: