This code doesn't seem to fire this button. What's going wrong?

Question

I'm working on something for a client and an agency have built a small bit of jQuery to fire off a DoubleClick Floodlight Tag but for some reason the tag doesn't work:

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

To me this script looks fine, but in a live environment the call to "ad.doubleclick.net" is never made? Any help would be much appreciated. Strangely the tag was working until this weekend but now is not recording any actions?

EDIT: I did a console.log(Page_IsValid) which returned True.

EDIT: Here is the HTML for the button in question:

<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

You already have the function on document ready, your problem is that you are calling the function in a wrong way, if you want to call the function like that you should declare it as a function expression (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);


});

a working example.

Answer 2

If this code is in the head tag of your HTML file it will not work properly. The JavaScript will try to execute before the page is finished being rendered. Because of this, when the code executes, the input tag will not exist yet according to the parser. You can put it in a document ready function or you can simply put your script tag at the end of the HTML document (before the end body tag).

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

Also, unless you're using the fireFloodlight function in other onclick functions, you can just pass it in as an anonymous function.

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

On top of that, if you're using the latest version of jQuery, you'll want to use .on() instead of .live(), .delegate(), or .click(). The former two are now technically deprecated in the latest version of jQuery (although I highly doubt they'll be removed for some time) and, if I remember correctly, .click() is simply a wrapper for the .on(), so it's technically faster to just use .on().

I'll give you two examples of how to use .on().

The first example is for simply adding the event to the #trackingButton element after the page has been loaded initially.

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

The second example here works by attaching the event to a parent element and executing the function after it bubbles up the DOM to the parent element, and the target element matches the selector provided in the second parameter. It is typically used when attaching events to elements that may be added/removed/re-added to the page dynamically after the initial load.

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

I hope these examples help!