jQuery each() on divs generated by server side

Question

I have the following jQuery code

$(document).ready(function () {
    $('.data').each(function (i) {
        alert('Test' + i);
        $(.data #forceclock).click(function () {
            console.log('Done');
            var id = $('employee_id').attr('value');

            $.ajax({
                'type': 'POST',
                'data': { employee_id: id },
                'datatype': 'text',
                'success': function (textStatus) {
                    alert("Successfully logged out a user!" + textStatus);
                    location.reload();
                },
                'error': function (textStatus) {
                    alert("failure" + textStatus);
                },
                'url': '/clockoutjs',
                'cache': false
            });
            return false;
        });

    });
});

The HTML is the following:

<table class="table table-striped table-bordered table-condensed table-hover">
    <thead>
    <tr>
        <th style="text-align: center">Employee Name</th>
        <th style="text-align: center">Employee ID</th>
        <th style="text-align: center">Clocked In</th>
        <th style="text-align: center"># of Clock ins</th>
        <th style="text-align: center"><a id="tooltip" data-toggle="tooltip" data-placement="top"
                                          title="As of last clock out in hours!">Total Clocked Time
            Today</a>
        </th>
        <th style="text-align: center">Time Since Last Checkin</th>
        <th style="text-align: center">Force clock out</th>
    </tr>
    </thead>
    {% for log in logs %}
        <tr id="data">
            <th style="text-align: center">{{ log.employee_name }}</th>
            <th class="employee_id" stlye="text-align: center"> {{ log.employee_id }}</th>
            <th style="text-align: center">{{ log.clocked_in|last }}</th>
            <th style="text-align: center">{{ log.clocked_in|length }}</th>
            <th style="text-align: center">{{ log.total_time|floatformat:2 }} Hours</th>
            <th style="text-align: center">{{ potential_times.0|floatformat:2 }} Hours</th>
            <th style="text-align: center"><div class="forceclock"><a href="#" class="btn btn-danger">Clock out!</a></div>
            </th>
        </tr>
    {% endfor %}
</table>

The click function makes an ajax request to the server that should clockout a user. Unfortunately I'm not able to supply the proper id nor create the click function for every button I've created.

How do I generate the click function for every element that was created in that table and make take the #employee_id from that <tr id="data">?

I'm using webapp2 and GAE to generate the content.

This will result in the link with the ID `forceclock` occuring multiple times, which is invalid. — Sebastian Simon, Sep 14 '15 at 03:41
ID of an element must be unique.. so you need to use a class for `forceclock` instead of ID — Arun P Johny, Sep 14 '15 at 03:42
Or, create a unique ID with `i` or something... but I'm not sure where a click function even fits in here in the first place. — sheriffderek, Sep 14 '15 at 03:43
@ArunPJohny Arun, I've added the missing employee_id ``'s in the code and added the div to surround the `` element. — Borko Kovacev, Sep 14 '15 at 03:56
@sheriffderek On the click it logs out a user via ajax post request. — Borko Kovacev, Sep 14 '15 at 03:56
@PrashanthThurairatnam The server code is python. `{{ log.etc }}` are variables I passed to the template via that code. I'm using django templates and webapp2 as the python framework. — Borko Kovacev, Sep 14 '15 at 04:08
@BorkoKovacev I am not a python expert; but why not use the loop index and append it to elements to generate unique ids. http://stackoverflow.com/questions/522563/accessing-the-index-in-python-for-loops — Prashanth Thurairatnam, Sep 14 '15 at 04:12
Why did someone add a `python` tag? The question has nothing to do with python, it only has jquery and django templating language. — spectras, Sep 14 '15 at 04:19
@PrashanthThurairatnam That could have been a different approach, but I would still have to deal with jquery selectors. — Borko Kovacev, Sep 14 '15 at 04:31

score 0 · Answer 1 · answered Sep 14 '15 at 03:48

I think that your problem may be the jQuery look up... needs a larger scope - because it doesn't know your new stuff is there. Put an ID on your table.. #table... etc....

$('#table').on('click', '.button-youre-targeting', function() {
  // whatever
});

So, it's watching for events in the larger scope...

Shot in the dark. Not really sure if I'm on the right track - because I don't see a click handler...

score 0 · Accepted Answer · answered Sep 14 '15 at 04:00

You can do something like

    <table id="employee-info" class="table table-striped table-bordered table-condensed table-hover">
        <thead>
        <tr>
            <th style="text-align: center">Employee Name</th>
            <th style="text-align: center">Employee ID</th>
            <th style="text-align: center">Clocked In</th>
            <th style="text-align: center"># of Clock ins</th>
            <th style="text-align: center"><a id="tooltip" data-toggle="tooltip" data-placement="top"
                                              title="As of last clock out in hours!">Total Clocked Time
                Today</a>
            </th>
            <th style="text-align: center">Time Since Last Checkin</th>
            <th style="text-align: center">Force clock out</th>
        </tr>
        </thead>
        {% for log in logs %}
            <tr class="data">
                <th style="text-align: center">{{ log.employee_name }}</th>
                <th class="employee_id" stlye="text-align: center"> {{ log.employee_id }}</th>
                <th style="text-align: center">{{ log.clocked_in|last }}</th>
                <th style="text-align: center">{{ log.clocked_in|length }}</th>
                <th style="text-align: center">{{ log.total_time|floatformat:2 }} Hours</th>
                <th style="text-align: center">{{ potential_times.0|floatformat:2 }} Hours</th>
                <th style="text-align: center"><div class="forceclock"><a href="#" class="btn btn-danger">Clock out!</a></div>
                </th>
            </tr>
        {% endfor %}
    </table>

then inside the click handler use the this reference to find the employee-id of the clicked row

$(document).ready(function () {
    $('#employee-info .forceclock').on('click', function (i) {
        console.log('Done');
        var id = $(this).closest('tr').find('.employee_id').text();

        $.ajax({
            'type': 'POST',
                'data': {
                employee_id: id
            },
                'datatype': 'text',
                'success': function (textStatus) {
                alert("Successfully logged out a user!" + textStatus);
                location.reload();
            },
                'error': function (textStatus) {
                alert("failure" + textStatus);
            },
                'url': '/clockoutjs',
                'cache': false
        });
        return false;
    });

});

If you want to use event delegation change the handler to

$(document).ready(function () {
    $('#employee-info').on('click', '.forceclock', function (i) {
        //click handler code
    });
});

What would event delegation change, or actually would it help me? I'm sorry, I'm a jQuery beginner. — Borko Kovacev, Sep 14 '15 at 04:22
@BorkoKovacev [event delegation](http://learn.jquery.com/events/event-delegation/) is used to handle events on dynamic elements.... — Arun P Johny, Sep 14 '15 at 04:23

PeterKA · Answer 3 · 2015-09-14T04:13:56.047

Your markup should be:

<tr class="data">

Not <tr id="data">. And to get the employee ID use the following:

var id = $('employee_id', this).text();

Also, note that you do not need to use .each(), jQuery will internally iterate through all elements that match the selector. So your code should look like so:

$('.data').click(function (e) {
    e.preventDefault();
    var id = $('employee_id', this).text();

    $.ajax({
        'type': 'POST',
        'data': { employee_id: id },
        'dataType': 'text',
        'success': function (data) {
            alert("Successfully logged out a user!" + data);
            //Update DOM with data received. No need to reload page - defeats the purpose of ajax.
            //location.reload();
        },
        'error': function (textStatus) {
            alert("failure" + textStatus);
        },
        'url': '/clockoutjs',
        'cache': false
    });
});

score 0 · Answer 4 · answered Sep 14 '15 at 04:04

you want to click this button line<th style="text-align: center"><a id="forceclock" href="#" class="btn btn-danger">Clock out!</a>. In above line id is must be unique so remove #forceclock then insert your employee_id value in there...

$(document).ready(function () {
         $('body').on('click','.btn-danger',function(){
          var edit_id = $(this).attr('id'); //id must be your employee_id
          .........//it will be ok
         });
});

jQuery each() on divs generated by server side

4 Answers4