如何根据点击的 Div 获取正确的 ID-html教程-PHP中文网

如何根据点击的 div 获取正确的 id

本文旨在解决在使用 jQuery 动态生成内容时，点击事件无法获取正确 ID 的问题。通过事件委托和 DOM元素查找，我们将演示如何确保点击事件能够准确地获取到与点击元素相关联的 ID 值，从而避免获取到错误的 ID。

在使用 jQuery 进行动态内容生成时，经常会遇到点击事件无法正确获取目标元素 ID 的情况。这通常是因为事件绑定发生在元素生成之前，或者选择器选取了错误的元素。本教程将通过一个实际案例，详细讲解如何利用事件委托和正确的 DOM 元素查找方法，来解决这个问题。

问题分析

在提供的代码中，点击 .histor-uten 元素时，总是获取到第一个 input[name='id_utt'] 的值，而不是与当前点击元素关联的 input 元素的值。这是因为选择器 $("input[name='id_utt']").val() 总是返回页面上第一个匹配的元素的值，而没有考虑到上下文关系。

解决方案：事件委托和 DOM 元素查找

解决此问题的关键在于使用事件委托，并将查找范围限定在当前点击的元素内部。

JSON Toolkit

JSON文件多功能工具。支持格式化、验证、压缩、键排序及点记法路径查询。零依赖。

下载

事件委托： 将事件监听器绑定到父元素（例如 .tesssste），利用事件冒泡机制，当子元素 .histor-uten 被点击时，事件会冒泡到父元素，从而触发事件监听器。
DOM 元素查找： 在事件处理函数中，使用 $(this) 获取当前点击的元素，然后使用 find() 方法在该元素内部查找目标 input 元素。

以下是修改后的代码：

var data = [
    { codigo: "1", Utente: "Teste" },
    { codigo: "2", Utente: "Teste1" },
    { codigo: "3", Utente: "Teste2" },
    { codigo: "4", Utente: "Teste3" },
    { codigo: "5", Utente: "Teste4" },
    { codigo: "6", Utente: "Teste5" },
];

$(document).on('click', '.dad-inf', function() {
    var linha = ``;

    for (var i = 0; i 
            <a href="#" class="dropdown-item btn btn-warning histor-uten">
              <div class="profile-photo-div" id="profile-photo-div">
                <div class="profile-buttons-div">
                  <div class="profile-img-input" id="profile-img-input">
                    <label class="butttton" id="change-photo-label" for="change-photo">#${Utente}</label>
                    <input type="hidden" name="id_utt" value="${codigo}">
</div>
                </div>
               </div>
              </a>
            `;
    }

    $(".tesssste").html(linha);

});

$(document).on('click', '.histor-uten', function(e) {
    let parent = $(this);
    // First make sure it selects the element with the histor-uten class
    if (!parent.hasClass('histor-uten')) {
        parent = $(this).closest('.histor-uten');
    }

    // Get the child input from the parent instead of the first one in the document
    var id_utt = $(parent.find("input[name='id_utt']")).val();
    console.log(id_utt);

});

$(function() {
    $(".btn-show").click(function(e) {
        e.preventDefault();
        el = $(this).data('element');
        $(el).show();
        $("section > div").not(el).hide();
    });
});

代码解释：

$(document).on('click', '.histor-uten', function(e) { ... });: 使用事件委托，将点击事件绑定到 document 上，监听 .histor-uten 元素的点击事件。
let parent = $(this);: 获取当前点击的 .histor-uten 元素。
if (!parent.hasClass('histor-uten')) { parent = $(this).closest('.histor-uten'); }: 确保选择器选中了 .histor-uten 元素。
var id_utt = $(parent.find("input[name='id_utt']")).val();: 在当前点击的 .histor-uten 元素内部查找 input[name='id_utt'] 元素，并获取其值。

完整 HTML 代码

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js"></script><a href="s105" data-element="#minhaDiv105" class="btn-show dad-inf">Utentes</a>

<section id="s105"><div id="minhaDiv105">
        <div class="row tesssste">
        </div>
    </div>
</section><script>
    var data = [
        { codigo: "1", Utente: "Teste" },
        { codigo: "2", Utente: "Teste1" },
        { codigo: "3", Utente: "Teste2" },
        { codigo: "4", Utente: "Teste3" },
        { codigo: "5", Utente: "Teste4" },
        { codigo: "6", Utente: "Teste5" },
    ];

    $(document).on('click', '.dad-inf', function() {
        var linha = ``;

        for (var i = 0; i < data.length; i++) {
            codigo = data[i].codigo;
            Utente = data[i].Utente;

            linha += `<div class="col-md-6 col-xl-3">
            <a href="#" class="dropdown-item btn btn-warning histor-uten">
              <div class="profile-photo-div" id="profile-photo-div">
                <div class="profile-buttons-div">
                  <div class="profile-img-input" id="profile-img-input">
                    <label class="butttton" id="change-photo-label" for="change-photo">#${Utente}
                    <input type="hidden" name="id_utt" value="${codigo}">
                  
                
               
              
            `;
        }

        $(".tesssste").html(linha);

    });

    $(document).on('click', '.histor-uten', function(e) {
        let parent = $(this);
        // First make sure it selects the element with the histor-uten class
        if (!parent.hasClass('histor-uten')) {
            parent = $(this).closest('.histor-uten');
        }

        // Get the child input from the parent instead of the first one in the document
        var id_utt = $(parent.find("input[name='id_utt']")).val();
        console.log(id_utt);

    });

    $(function() {
        $(".btn-show").click(function(e) {
            e.preventDefault();
            el = $(this).data('element');
            $(el).show();
            $("section > div").not(el).hide();
        });
    });
</script>