具有相同類別的動態元素

Question

關於動態創建的元素，我遇到了一些問題。 我正在嘗試為我的站點創建一個頁面，該頁面將顯示用戶列表（已從控制器傳遞到我的視圖中）。 我為每個用戶創建了一個div持有人，在每個div內，我有兩個h3標簽，分別顯示用戶的ID和名稱。 每個用戶div還包含一個按鈕，該按鈕允許隱藏或顯示用戶。

 <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>

除了“ name”和“ id”屬性外，我還傳遞了“ hidden bool”屬性。 這用於檢查用戶是否已隱藏。 我遇到的問題是，因為元素是動態創建的，所以它們都共享相同的類和ID，所以我無法檢查用戶是否隱藏。 我在網上查看並找到了可能的解決方案，但是它仍然無法正常工作。 這是我的JavaScript代碼。

 <script type="text/javascript">

    $('.single-user').on('click', '.sub-btn', function () {
        if ($('.single-user').has('#True')) {
            console.log("true");
        }
        else {
            console.log("false");
        }
    });

 </script>

任何幫助將不勝感激。

Answer 1

<div class="single-user" data-visible="@user.Hidden.ToString()">
     <h3>ID: @user.Id</h3>
     <h3>Name: @user.Forename @user.Surname</h3>
     <span><input type="submit" class="sub-btn" /></span>
 </div>


<script type="text/javascript">

    $(document).on('click', '.sub-btn', function () {
        if ($(this).closest('.single-user').attr('data-visible')=="True") {
            console.log("true");
        }
        else {
            console.log("false");
        }
    });

 </script>