Html::button in accordion panel

I have series of Html::button tags that open a modal and, for the most part, they work as expected.

In my view:


echo Html::button('<i class="glyphicon glyphicon-saved"></i>&nbsp;Employ', 

  ['value' => Url::to(["/employment/create", 'relation_id'  => $id]), 

  'id' => 'employButton',

  'class' => 'modalBtn',

  ]); 

In main.js:


$(function(){

	$('.modalBtn').click(function(){

		var modal = $('#modalCreate').modal('show');

		modal.find('#modalContent').load($(this).attr('value'));

	});

});

And here is the _modal.php partial:




<?php

use yii\bootstrap\Modal;

Modal::begin([

		'header' => '<h4>Complete <span id="title-model"></span> information</h4>',

		'id' => 'modalCreate',

]);

echo "<div class=modal-body id='modalContent'></div>";

Modal::end();

?>	    



The problem is that when I place a button like this inside an accordion panel, the click event does not fire the js handler. Putting an alert in the ‘onclick’ property of the button works, but putting an alert in the js function does not.

Is the jQuery UI accordion intercepting the click event somehow?

Best,

Joe