table表格添加事件,除了第一行都没有响应???
phpcn_u391
phpcn_u391 2017-02-03 17:13:24
0
2
880

表格内容如下:

<table id="table" class="table" style="margin-top: 20px;">
            <tr>
                <td>文件名</td>
                <td>文件路径</td>
                <td>分类</td>
                <td>大小</td>
                <td>操作</td>
            </tr>
            <#list resources as resource>
                <tr id="trnode" name="${resource.resource_id}">
                    <td id="res_id" style="display: none">${resource.resource_id}</td>
                    <td id="name">${resource.name}</td>
                    <td>${resource.location}</td>
                    <td>${resource.creator}</td>
                    <td>${resource.size}</td>
                    <td>
                        <input id="tbbtn" type="button" value="测试">
                        <a href="#" data-toggle="modal" data-target="#editModal">编辑</a>&nbsp;                        <a href="#" data-toggle="modal" data-target="#showModal">查看</a>&nbsp;                        <a href="#" id="delbtn" data-toggle="modal" data-target="#deleteModal">删除</a>
                    </td>
                </tr>
            </#list>
        </table>

为删除添加事件,但是除了第一行数据有响应外,其他都没有响应。

<script>
    $(document).ready(function(){
        $('#tbbtn').on('click', function(){
            alert("123");
        })

        $('#delbtn').on('click', function(){
            alert("123");
        })

    });
</script>

请问这是什么原因?

phpcn_u391
phpcn_u391

全員に返信(2)
数据分析师

テーブルテーブル追加イベント、最初の行以外は応答なし???-PHP 中国語 Web サイト Q&A-テーブル テーブル追加イベント、最初の行以外は応答なし???-PHP 中国語 Web サイト Q&A

見て回ってください。

いいねを押す +0
阿神

你使用的选择器是ID选择器。

$('#tbbtn').on('click', function(){
    alert("123");
})

$('#delbtn').on('click', function(){
    alert("123");
})

在ID选择器中只会ID唯一的元素,所以只会选择一个元素。

建议你把ID选择器换成CLASS选择器,代码如下:

<#list resources as resource>
    <tr id="trnode" name="${resource.resource_id}">
        <td id="res_id" style="display: none">${resource.resource_id}</td>
        <td id="name">${resource.name}</td>
        <td>${resource.location}</td>
        <td>${resource.creator}</td>
        <td>${resource.size}</td>
        <td>
            <input class="tbbtn" type="button" value="测试">
            <a href="#" data-toggle="modal" data-target="#editModal">编辑</a>&nbsp;
            <a href="#" data-toggle="modal" data-target="#showModal">查看</a>&nbsp;
            <a href="#" class="delbtn" data-toggle="modal" data-target="#deleteModal">删除</a>
        </td>
    </tr>
</#list>
$('.tbbtn').on('click', function(){
    alert("123");
})

$('.delbtn').on('click', function(){
    alert("123");
})
いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート