javascript - 服务器端生成的 div 上的 jQuery every()

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

你可以做类似的事情

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

});

<小时/>

如果您想使用事件委托(delegate)，请将处理程序更改为

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