Ajax click only working once

Question

This question may have been answered already but I've checked the existing solutions and tried them with no luck. Basically, I've set up an ajax loading environment triggered by a click event but it only works for the first instance.

My js is as follows:

$('.load-map').each(function(){
    $(this).on('click', this, function(event) {
    event.preventDefault();

    var fileID = $(this).attr('data-level');

    $.ajax({
    url: fileID
    }).success(function (data) {
        $('#card-data').html(data);
    });

    setTimeout(function () {

    $('#myModal').on('shown.bs.modal', function () {
      })}, 1000);

    });
});

The HTML setup is basic:

<a href="#" data-level="level-1.html" class="load-map level-1-marker marker current-level"  data-toggle="modal" data-target="#myModal">
<a href="#" data-level="level-2.html" class="load-map level-2-marker marker current-level"  data-toggle="modal" data-target="#myModal">

Answer 1

The each loop is not needed: Try this way!

$( document ).on('click', '.load-map', 
function(evt)
{
    var fileID = $(this).attr('data-level');

    $.ajax({
     url: fileID
     }).success(function (data) {
        $('#card-data').html(data);
     });

    setTimeout(function () {

       $('#myModal').on('shown.bs.modal', function () {
       })}, 1000);

    });
}