jQuery - Event not working properly

Question

I'm setting a click event on an anchor to set a value to a button (initially, the button has a -1 value, that can't be submitted) that later will submit an Ajax call. The problem is that sometimes it works, sometimes doesn't; I just don't understand why.

JS :

$(".events-list a").click(function(e) { 
    e.preventDefault();
    var id = $(this).data('event-id');
    $(".edit-occurrence-button").val(id);
});

HTML :

<div id="modal-edit-occurrence-form" class="modal hide fade" tabindex="-1" style="font-family: 'Open Sans', sans-serif;" role="dialog" aria-labelledby="modal-edit-occurrence-label" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="modal-edit-occurrence-label">Editar ocorrência</h3>
    </div>
    <div class="modal-body">
        <form>
            <fieldset>
                <!-- Some input fields here -->
            </fieldset>
        </form>
    </div>
    <div class="modal-footer">
        <button id="modal-edit-occurrence-submit" class="btn btn-info">Editar</button>
        <button class="btn" data-dismiss="modal" aria-hidden="true">Cancelar</button>
    </div>
</div>


<div class="modal hide fade" id="events-modal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3>Ocorrência</h3>
    </div>
    <div class="modal-body" style="height: 600px;">
        <!-- Some content here -->
    </div>
    <div class="modal-footer">
        <button class="btn btn-info edit-occurrence-button" value="-1" data-dismiss="modal" aria-hidden="true">Editar</button>
        <button class="btn" data-dismiss="modal" aria-hidden="true">Fechar</button>
    </div>
</div>

OBS : The .events-list a is an anchor generated by BootstrapCalendar dynamically ( http://bootstrap-calendar.azurewebsites.net/ ), that has this format:

<div class="events-list" data-cal-start="1386126000000" data-cal-end="1386212400000">
    <a href="mylink.php?id=44" data-event-id="44" data-event-class="event-a" class="pull-left event event-a" data-toggle="tooltip" title="" data-original-title="a"></a>
</div>

EDIT: I found out why it doesn't work sometimes. It deppends on what element is triggering the event. On Bootstrap Calendar, we have 3 ways of openning the calendar event (clicking the event on the calendar, clicking the event after opening the day's events, clicking on the last events). The problem is only when I try to click on the event after opening the day's events, because it is generated dynamically. How can I fix it?

Answer 1

The problem is that jquery can't see the element and attach a event handler.

Try using the jquery .on() event handler

$("##static_parent##").on('click' , '.events-list a', function(e) { 
    e.preventDefault();
    var id = $(this).data('event-id');
    $(".edit-occurrence-button").val(id);
});

Replace ##static_parent## with a parent element of your target element that's rendered in the page on load. (if you can't find any use 'body').

This might be useful

Answer 2

Try preventing default event for <a> also with some code refactoring

$(".events-list a").click(function(e) {
    e.preventDefault();
    var id = $(this).data('event-id');
    $(".edit-occurrence-button").val(id);
});

Assuming the HTML looks like below

 <input type="submit" class="edit-occurrence-button" value="1" />

<ul class="event-list">
<li><a href="#">Event</a>
</a>