admin管理员组

文章数量:1406919

I have dynamically added buttons on my page inside a table. Two buttons, with classes "editbuttonclass" and "deletebuttonclass".

I am using this jQuery selection to run on my button click event, it runs on both buttons though, how can I run separate functions depending on the button class?

jQuery

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

I have tried this but it doesn't work:

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

I have dynamically added buttons on my page inside a table. Two buttons, with classes "editbuttonclass" and "deletebuttonclass".

I am using this jQuery selection to run on my button click event, it runs on both buttons though, how can I run separate functions depending on the button class?

jQuery

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

I have tried this but it doesn't work:

$('#table').on('click',"button .editbuttonclass", function(e){})
  • javascript
  • jquery
Share Improve this question edited Feb 17, 2016 at 9:53 Praveen Kumar Purushothaman 167k27 gold badges213 silver badges260 bronze badges asked Feb 17, 2016 at 9:28 user5563910user5563910 1
  • 1 remove space between button and class "button.editbuttonclass" – jcubic Commented Feb 17, 2016 at 9:29
Add a ment  | 

4 Answers 4

Reset to default 3

The class belongs to the button, so don't give a space:

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

When you give a space, it bees a descendant selector, which selects the elements that are children to the tag.

Use button.classname, button .editbuttonclass looks for an element with class editbuttonclass within a button element - descendant selector

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

Try like this:

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

Remove the white space between button and button class.

Try This

 <!DOCTYPE html>
    <html>
      <script src="https://ajax.googleapis./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>

本文标签： javascriptjQuery select click event of button with particular classStack Overflow

版权声明：本文标题：javascript - jQuery select click event of button with particular class - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744318242a2600370.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。