Clickable Element in Header

I have a table where I need to place question marks in the header. Ideally these columns would still be sortable. It appears DataTables makes the entire header cell clickable which is causing problems.

Here is how I am trying to initialize DataTable

$(function() {
$('#table').dataTable(
{
"aoColumns": [
{ "bSortable": false, "sTitle": "<span id='qa_one><img id='qa_one_t' src='img/question.png'/></span><span>Col One</span>", "mDataProp":null },
null,
{ "bSortable": false },
null,
null,
{ "bSortable": false },
{ "bSortable": false }
]
}
);

this generates the following code

<td class="sorting_disabled" tabindex="0" rowspan="1" colspan="1" style="width: 142px;" aria-label="Col One">
<span id="qa_points">
<span>Type of Points</span>
</td>


if I turn sorting off I can see that clicking the question mark image selects the entire cell but doesn't do anything. If I leave sorting on and click the question mark image, the table gets sorted.

Any help would be very much appreciated.


});