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?

Use `$(".edit-occurrence-button").val(id)` instead of setting the `value` attribute. But show your html as well and how to replicate the issue. — PSL, Dec 06 '13 at 15:51
Are you saying the event doesn't fire, or something else? I would suggest provide full code to replicate the issue. Preferably with a [JSFiddle](http://jsfiddle.net/) — musefan, Dec 06 '13 at 15:52
does your button creates before domready? or after some actions ? — Vahe Shadunts, Dec 06 '13 at 15:52
Also, you might want to prevent the default anchor behaviour — kinghfb, Dec 06 '13 at 15:52
sometimes not working mean may be `callback issue` or logical issue. What the remaining part of `(a).click(function(){});` does? — Murali Murugesan, Dec 06 '13 at 15:52
Have you looked for console errors and looked at the network monitor? (F12 on Chrome) — Dan, Dec 06 '13 at 15:53
@PSL I already tried with `.val(id)` instead of `.attr("value", id)`, but the result was the same. — Minoru, Dec 06 '13 at 15:53
@LucasHarada We cannot help you with your incomplete question. You need to provide enough code to replicate the issue. — PSL, Dec 06 '13 at 15:54
@Murali The `.click(function(){});` is only the written code. As I wrote before, this is only for changing a button's value for a later submit form. — Minoru, Dec 06 '13 at 15:55
try preventing default event using `$(".events-list a").click(function(e) { e.preventDefault();...}` — Murali Murugesan, Dec 06 '13 at 15:59
@LucasHarada, please check my answer for HTML structure detail. Please add your HTML code, may be help us — Murali Murugesan, Dec 06 '13 at 16:04

score 2 · Accepted Answer · edited May 23 '17 at 12:34

2

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

edited May 23 '17 at 12:34

Community

1
1

answered Dec 09 '13 at 11:22

Eugen Dimboiu

2,733
2
26
33

Probably something to do with load order - if your html is generated before your event handler is interpreted by the browser - it probably works, if the html is not yet generated it doesn't. Try my solution and it should work every time. – Eugen Dimboiu Dec 09 '13 at 11:52
I edited the question. I was wrong about the element being generated before the DOM ready. – Minoru Dec 09 '13 at 12:29

score 1 · Answer 2 · answered Dec 06 '13 at 16:00

1

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>

answered Dec 06 '13 at 16:00

Murali Murugesan

22,423
17
73
120

I posted the HTML part. I tried to adapt your code, but it doesn't work too. The `e.preventDefault();` didn't solve. – Minoru Dec 06 '13 at 16:20
@LucasHarada What is the issue exactly. By doesn't work you mean it doesn't set the value? Here is a bootstrap template see if you can place the code here and replicate your issue http://jsfiddle.net/uejym/ – PSL Dec 06 '13 at 16:22
Exactly, sometimes it works nice, changes the value from -1 to 44, on the example; sometimes, doesn't do anything, the value -1 keeps unchanged. – Minoru Dec 06 '13 at 16:24

jQuery - Event not working properly

2 Answers2