data passed to jquery .on(handler) comes out as undefined

Question

I have three anchor tags that are added from an ajax $.get() response.
I need to fire a second request when one of them is clicked.
The second request has parameters set by the the values of the html global data attributes in these anchors.

<div id="qbostatus">
    <a class='button radius small updateqbo' data-customer_id='1032' data-push='yes' data-create='no' style='margin-top:2em; margin-bottom:.4em;'>Accept and Push Changes</a>
    <a class='button radius small updateqbo' data-customer_id='1032' data-push='no' data-create='no' style='margin-bottom:.4em;'>Accept and Leave Alone</a>
    <a class='button radius small updateqbo' data-customer_id='' data-push='no' data-create='yes'>Reject and Create New</a>
</div>
<script>
    function updateQBO(event){
        console.log(event.data);
        $.ajax({
            type: "get",
            async: true,                
            url: "update_contact_updateQBO.php",
            success: function(result){
                $("#qbostatus").html(result);
            },
            data: {
                create: event.data.create,
                push: event.data.push,
                id: event.data.customer_id,
                fname: $("input[name='fname']").val(),
                lname: $("input[name='lname']").val(),
                email: $("input[name='email']").val(),
                street_address: $("input[name='street_address']").val(),
                city: $("input[name='city']").val(),
                state: $("input[name='state']").val(),
                zip: $("input[name='zip']").val(),
                phoneam: $("input[name='phoneam']").val(),
                phonepm: $("input[name='phonepm']").val()
            },
            beforeSend: function(jqXHR, settings) {
            console.log(jqXHR, settings);
            console.log(create);
            console.log(push);
            console.log(id);

            }       
        });         
    }


    $("#qbostatus").on("click", ".updateqbo", {
        customer_id: $(this).attr('data-customer_id'),
        push: $(this).attr('data-push'),
        create: $(this).attr('data-create')},
        updateQBO);

Clicking any of these anchors creates the following console.log() output:

Object {customer_id: undefined, push: undefined, create: undefined}

Initially I figured something was wrong with the plain object containing the data which is passed to the event handler. So I tested each of the selectors independently using an anonymous function as the handler to log the values to the console. These selectors all appear to be working as follows:

    $("#qbostatus").on("click", ".updateqbo", 
        function(){
        console.log($(this).attr('data-customer_id'));
        console.log($(this).attr('data-push'));
        console.log($(this).attr('data-create'));
    });

Produces the following console log when the first anchor tag is clicked:

 1032
 yes
 no

So I'm still stumped on why the original code is passing "data-customer_id", "data-push", and "data-create" to updateQBO() as undefined. Any ideas? thanks

Answer 1

Try

html

Substituted data-customerid='1023' for data-customer_id='1023'

js

$(function() {
var updateQBO = function updateQBO(event) {
        var data = $(event.target).data();
        console.log(data);
        $.ajax({
            type: "POST",
            async: true,                
            url: "/echo/json/",
            success: function(result){
                // $("#qbostatus").html(result);
            },
            data: {json:JSON.stringify({
                create: data.create,
                push: data.push,
                id: data.customerid,
                fname: $("input[name='fname']").val(),
                lname: $("input[name='lname']").val(),
                email: $("input[name='email']").val(),
                street_address: $("input[name='street_address']").val(),
                city: $("input[name='city']").val(),
                state: $("input[name='state']").val(),
                zip: $("input[name='zip']").val(),
                phoneam: $("input[name='phoneam']").val(),
                phonepm: $("input[name='phonepm']").val()
            })},
            beforeSend: function(jqXHR, settings) {
              var data = JSON.parse(
                           decodeURIComponent(settings.data.split(/=/)[1])
                         );
              console.log(jqXHR, settings);
              console.log(data.create, data.push, data.id);
            }       
        });         
    };

    var elem = $("#qbostatus");
    elem.on("click", ".updateqbo",updateQBO);
});

jsfiddle http://jsfiddle.net/zLc531g6/2/