I'm currently facing challenges with dynamically generated elements. I am working on a page for my website that will show a list of users (data provided by the controller). Each user is represented within a div, containing two h3 tags displaying the user's ID and Name. In addition, each user div includes a button to toggle visibility.
<div class="single-user" id="@user.Hidden.ToString()">
<h3>ID: @user.Id</h3>
<h3>Name: @user.Forename @user.Surname</h3>
<span><input type="submit" class="sub-btn" /></span>
</div>
Aside from 'name' and 'id', a 'hidden' boolean property is also passed in. This determines if a user is hidden or not. The issue arises because all dynamically created elements share the same classes and IDs, making it difficult to track the hidden status of individual users. I have tried implementing a solution found online without success. Below is my JavaScript code.
<script type="text/javascript">
$('.single-user').on('click', '.sub-btn', function () {
if ($('.single-user').has('#True')) {
console.log("true");
}
else {
console.log("false");
}
});
</script>
Your assistance on this matter would be highly appreciated.