在我的表格中单击了什么按钮答案

【问题标题】：what button is clicked in my table在我的表格中单击了什么按钮
【发布时间】：2017-03-27 13:54:44
【问题描述】：

我有一个奇怪的问题......我想。

我有以下代码：在<body>：

<!-- headers, includes and other "plain" html... -->
<div class="col-sm-4"> <!-- Second column -->
    World!
    <br>
    <p id="testerP"></p>
    <script>
        var temptext = '';
        for (var i = 0 ; i < 3 ; i++){
            temptext += '<button name="deleted" value=' + i + ' class="btn btn_sm btn-danger deletes" role="button">DEL</button><br>'
            temptext += '<br>';
            temptext += '<br>';
        }
        document.getElementById("testerP").innerHTML = temptext;
    </script>
</div>

<div class="col-sm-4"> <!-- Third column -->
    <h2>Robot Job Queue</h2>
    <table  id="queueAll" class="table table-striped table-responsive">
        <thead><tr><th>Id</th><th>Type</th><th>Delete</th><th>Priority</th></tr></thead>
        <tbody id="tbod">
        </tbody>
    </table>
</div>

在</body>之后的脚本部分

<script>
$(document).ready(function () {
    var socket = io();

    // When the client receives a "queue" from the server
    socket.on('queue', function(msg){
        var html = ''; 
        var tmp = '';
        html += '';
        temptext = '';

        if(msg.length == 0){$("#queueAll").hide();}
        else{$("#queueAll").show();}
        for (var i = 0 ; i < msg.length && i<5 ; i++){
            html += '<tr name="queueRow">'
            html += '<td>' + msg[i]['id'] + ' </td>'
            html += '<td>' + msg[i]['type'] + '</td>'
            tmp = '<button name="deleted" value=' + msg[i]['id'] + ' class="btn btn_sm btn-danger deletes" role="button">DEL</button>';
            html += '<td>' + tmp + '</td>'
            html += '<td>' + msg[i]['priority'] + '</td>'
            html += '</tr>'
        }
        document.getElementById("tbod").innerHTML = html;
    });

    //Submitting deleteJob
    $('.deletes').on('click',function(e){
        console.log(e.target.value);
        var dataReturn = {jobType:e.target.value};
        socket.emit("delete job",dataReturn);
    });
});
</script>

问题是：第一个 for 循环（在<body> 内部，id=testerP）按预期运行。我在服务器端和客户端都获得了按钮值。但是，当我点击表格内的按钮时，我没有任何反应？！？！

我可以使用

获得“testerP”按钮

$('button[name="deleted"]').on('click',function(){...

$('.deletes').on('click',function(){...

和

$('button').on('click',function(){...

但是表格按钮没有任何反应！

为什么不（轻微呜咽）？？？

项目信息：

节点.js
快递
socket.io
引导程序
jQuery
我的第一个 Web 项目除了纯 html 之外的任何内容...

【问题讨论】：

$(document).on('click', 'button[name="deleted"]', function(event) {});尝试像这样使用。
@Prageeth 写了我想写的评论。问题是您试图在按钮存在之前获取按钮（如果您将在评论所在的位置添加 console.log($('.deletes'))，它将输出“未定义”）

标签： javascript jquery html socket.io

【解决方案1】：

动态添加到 DOM 的元素，在您的情况下，生成删除按钮的 for 循环需要使用

$(document).on('click', '.deletes', function() { 
    // your delete logic
});

【讨论】：

就是这样……现在一切看起来都那么明显了 :)

【解决方案2】：

问题可能是没有准备好将您的代码包装在 DOM 中。

$(document).ready(function() {
$(document).on('click', 'button[name="deleted"]', function(event) {});

$(document).on('click', '.deletes', function(event) {});
});

【讨论】：