Question

我在一个锚上设置一个click事件，将一个值设置为一个按钮（最初，该按钮的值为-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动态生成的锚点（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日历中，我们有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>

jQuery - 事件无法正常工作

2 个答案: