I've resolved this by using the data-content attribute.
<select class="selectpicker show-tick btn-kpi btn-kpi-select chart" data-style="btn-kpi-selector">
@foreach (SelectChartColumnVM col in chartCols)
{
<option data-content="<span class='select-chart-column' data-action='@col.Action'
data-new-id='@col.ID' data-chart-index='@Model.ChartIndex'>
@col.DisplayDescription() </span>">
@col.DisplayDescription()
</option>
}
</select>
The span assigned to the data-content attribute gets inserted into generated list html.
$('#charts').on('click', 'a > .select-chart-column',
function () {
$this = $(this);
$.shared.mvcAjax("/SelectChartColumn",
{
action: $this.data("action"),
newId: $this.data("new-id"),
chartIndex: $this.data("chart-index")
},
updateChartData);
}
);
I had to be careful and change the jQuery selector to only get elements that were a direct child of an anchor tag. The Bootstrap select transform also places the span in the button so that the event will get triggered on just showing the drop down menu if you don't do this.