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){})
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 becomes 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.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>
"button.editbuttonclass"