Bootstrap modal does not appear on first call

I am trying to use bootstrap 3.0 to load an external html file into a modal using jQuery Ajax loader, however it does not appear on the first call, but works on subsequent calls.

<a data-toggle="modal" data-target="#myModal" href="#myModal" id="myModal" aria-hidden="true">Department</a>

<div class="contianer">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                </button>
                <h4 class="modal-title">
                    <img src="img/logo.png" width="150" alt="SmartAdmin">
                </h4>
            </div>
                <div class="modal-body no-padding">
                </div>
        </div>
    </div>
</div>
</div>

<script type="text/javascript">
$('#myModal').click(function(e){
    e.preventDefault();
    $.ajax({
        type: "GET",
        url: "?AId=DEPT_ADDUPDATE",
        data: { },
        success: function(data){
            $('.modal-body').html(data);
        }
    });
});
</script>