Question

我有以下jQuery代码

$(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;
        });

    });
});

HTML如下：

<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>

click函数向服务器发出ajax请求，该请求应该为用户提供时钟。遗憾的是，我无法提供正确的ID，也无法为我创建的每个按钮创建点击功能。

如何为该表格中创建的每个元素生成点击函数，并从#employee_id获取<tr id="data">？

我使用webapp2和GAE生成内容。

Answer 1

您可以执行类似

的操作

8438    8510  +
3709    3181  -

然后在点击处理程序中使用<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>引用来查找所点击行的this

employee-id

如果要使用事件委派，请将处理程序更改为

$(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;
    });

});

Answer 2

你的标记应该是：

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

不是<tr class="data">。要获取员工ID，请使用以下内容：

<tr id="data">

，请注意您不需要使用var id = $('employee_id', this).text();，jQuery将在内部迭代所有与选择器匹配的元素。所以你的代码应该是这样的：

.each()

jQuery each（）在服务器端生成的div上

2 个答案: