javascript - jQuery - 事件无法正常工作

Question

我在 anchor 上设置了一个点击事件，为按钮设置一个值(最初，该按钮的值为 -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>

OBS:.events-list a 是由 BootstrapCalendar 动态生成的 anchor ( 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>

编辑:我发现为什么它有时不起作用。这取决于触发事件的元素。在Bootstrap Calendar上，我们有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## 替换为加载时在页面中呈现的目标元素的父元素。 (如果你找不到任何使用'body')。

这可能是useful