jQuery - Событие не работает должным образом

Question

Я устанавливаю событие щелчка на якоре, чтобы установить значение для кнопки (сначала кнопка имеет значение -1, которое не может быть отправлено), которое позже отправит Ajax вызов. Проблема в том, что иногда это работает, иногда нет; Я просто не понимаю, почему.

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> 

РЕК: .events-list a это якорь, порожденный BootstrapCalendar динамически (http://bootstrap-calendar.azurewebsites.net/), который имеет следующий формат:

<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: Я узнал, почему это не работает. Это зависит от того, какой элемент запускает событие. В календаре Bootstrap у нас есть 3 способа открытия события календаря (щелчок по событию в календаре, щелчок по событию после открытия событий дня, щелчок по последним событиям). Проблема заключается только в том, что я пытаюсь щелкнуть событие после открытия событий дня, потому что оно генерируется динамически. Как я могу это исправить?

Answer 1

Проблема заключается в том, что JQuery не может видеть элемент и присоединить обработчик событий.

Попробуйте использовать обработчик события jquery .on()

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

Заменить ## static_parent ## с родительским элементом вашего целевого элемента, который оказанной на странице под нагрузкой. (если вы не можете найти «тело»).

Это может быть useful

Answer 2

Попробуйте preventing default event для <a> также с некоторым рефакторинга кода

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

Предполагая, что HTML выглядит, как показано ниже

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

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