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

我有以下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>

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

员工姓名
员工ID
打卡
#时钟信号
{%endfor%}

click函数向服务器发出一个ajax请求，该请求应该会提醒用户。不幸的是，我无法提供正确的id，也无法为我创建的每个按钮创建单击功能

如何为该表中创建的每个元素生成click函数，并从中获取

\employee\u id

---

我正在使用webapp2和GAE生成内容。

我认为您的问题可能是jQuery查找。。。需要一个更大的范围-因为它不知道你的新东西在那里。把身份证放在桌子上#桌子等等

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

所以，它在更大范围内观察事件

---

在黑暗中拍摄。不太确定我是否在正确的轨道上-因为我没有看到单击处理程序

我认为您的问题可能是jQuery查找。。。需要一个更大的范围-因为它不知道你的新东西在那里。把身份证放在桌子上#桌子等等

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

所以，它在更大范围内观察事件

---

在黑暗中拍摄。不太确定我是否在正确的轨道上-因为我没有看到单击处理程序

你可以做如下事情

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

---

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

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

---

你可以这样做

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

---

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

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

您的标记应该是：

<tr class="data">

另外，请注意，您不需要使用

。每个（）

，jQuery将在内部迭代与选择器匹配的所有元素。因此，您的代码应该如下所示：

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

您的标记应该是：

<tr class="data">

另外，请注意，您不需要使用

。每个（）

，jQuery将在内部迭代与选择器匹配的所有元素。因此，您的代码应该如下所示：

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

---

您要单击此按钮行

。在上面的行中，id必须是唯一的，因此删除#forceclock，然后在其中插入员工id值

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

---

您要单击此按钮行

。在上面的行中，id必须是唯一的，因此删除#forceclock，然后在其中插入员工id值

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

---

HTMLT中没有

员工id

，这将导致与id

forceclock

的链接多次出现，这是无效的。元素的id必须是唯一的。。因此，您需要为

forceclock

使用一个类，而不是ID

也会（可能）被复制为什么有人添加了

python

标记？这个问题与python无关，它只有jquery和django模板语言。HTML中没有

employee\u id

，这将导致id

forceclock

的链接多次出现，这是无效的。元素的id必须是唯一的。。因此，您需要为

forceclock

使用一个类，而不是ID

也会（可能）被复制为什么有人添加了

python

标记？这个问题与python无关，它只有jquery和django模板语言。事件委派会发生什么变化，或者它实际上会帮助我吗？很抱歉，我是jQuery的初学者。@BorkoKovacev用于处理动态元素上的事件……事件委派会发生什么变化，或者实际上会对我有什么帮助？很抱歉，我是jQuery初学者。@BorkoKovacev用于处理动态元素上的事件。。。。