Question

我在表格中动态添加了页面上的按钮。两个按钮，类别为“editbuttonclass”和“deletebuttonclass”。

我使用这个jQuery选项在我的按钮点击事件上运行，它在两个按钮上运行，但是如何根据按钮类运行单独的函数？

的jQuery

$('#table').on('click',"button", function(e){})

我试过这个，但它不起作用：

$('#table').on('click',"button .editbuttonclass", function(e){})

Answer 1

使用button.classname，button .editbuttonclass在editbuttonclass元素中查找包含类button的元素 - descendant selector

$('#table').on('click',"button.editbuttonclass", function(e){})

Answer 2

class属于按钮，所以不要给出空格：

$('#table').on('click',"button.editbuttonclass", function(e){})
//----------------------------^

当你给出一个空格时，它会变成一个后代选择器，它选择作为标记子元素的元素。

Answer 3

试试这样：

 $('#table').on('click',"button.editbuttonclass", function(e){})

删除按钮和按钮类之间的空白区域。

Answer 4

试试这个

 <!DOCTYPE html>
    <html>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>


    <script>
        $(document).ready(function () {

                    var trHTML = "";

                    for (i = 0; i < 5; i++) {
                        trHTML += '<tr><td>' + "item.name" + '</td><td>' + "item.id" + '</td><td>' + "item.price" +
                                    '</td><td>' + '<button id="item.id" class="btn deletebuttonclass">Delete</button></td><td>' + '<button id="item.id" class="btn editbuttonclass">Edit</button>'
                        '</td></tr>';

                        $('#table').append(trHTML);
                    }


                    $('#table').on('click', "button.editbuttonclass", function (e) {

                        alert('do edit function')
                    })

                    $('#table').on('click', "button.deletebuttonclass", function (e) {

                        alert('do delete function')
                    })
        });


    </script>



    <body>
     <table id="table" border=1 align="center" height="150" width="200">
    <thead>
            <tr>
                <th width="100">Product Name</th>
                <th width="100">Price</th>
                <th width="100">Id</th>
                <th width="100">Delete</th>

            </tr>
        </thead>


        </tbody>
    </table>
     </body>
    </html>

jQuery选择具有特定类的按钮的单击事件

4 个答案: