TypeError: click called on object that does not implement interface HtmlElement

Question

I've seen the other questions on this topics, but i can't spot the error in my code.

$('#submit_bulk').on('click',function(e){

    var action = $('select[name="bulk_action"]'),
    targets = $('table tr td:first-child :checkbox:checked');
    if(action=='invalid' || targets.length == 0){
        sk.alert('Nothing to do','warning');
        return false;
    }else{
        $(this).html('Working....');

        var fData = {
            action: action,
            mixtapes: '',
            singles: ''
        };

        $.each(targets,function(i,v){
            if($(this).data('type') == 'mixtape'){
                fData.mixtapes += $(this).data('id')+',';
            }else{
                fData.singles += $(this).data('id')+',';
            }
        });

        fData = $.param(fData); 

        console.log(fData); //i get no output here. is fData null?

        $.post(window.location.origin+'/adminAPI/bulk_action',fData,function(data){
            var data = JSON.parse(data);
            if(data.error==0){
                sk.alert('Your changes were saved','success');
                //update view here.
            }else{
                sk.alert(data.message,'error');
            }
        });
        $(this).html('go');
    }

});

Answer 1

Word to the wise. make sure you are not passing a jQuery selector as a value into your form data.

the offending line was:

var action = $('select[name="bulk_action"]')

should have been:

var action = $('select[name="bulk_action"]').val()