点击获取DivID的正确技巧

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《点击 Div 获取 ID 的正确方法》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

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

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

问题分析

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

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

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

1. 事件委托： 将事件监听器绑定到父元素（例如 .tesssste），利用事件冒泡机制，当子元素 .histor-uten 被点击时，事件会冒泡到父元素，从而触发事件监听器。
2. 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 < 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}</label>
                    &lt;input type=&quot;hidden&quot; name=&quot;id_utt&quot; value=&quot;${codigo}&quot;&gt;
                  </div>
                </div>
               </div>
              </a>
            </div>`;
    }

    $(".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}</label>
                    &lt;input type=&quot;hidden&quot; name=&quot;id_utt&quot; value=&quot;${codigo}&quot;&gt;
                  </div>
                </div>
               </div>
              </a>
            </div>`;
        }

        $(".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>

总结

通过使用事件委托和正确的 DOM 元素查找方法，我们可以确保在动态生成的内容中，点击事件能够准确地获取到与点击元素相关联的 ID 值。 这种方法不仅解决了当前问题，也为处理类似的动态内容交互提供了通用的解决方案。 在实际开发中，应根据具体情况灵活运用这些技巧，提高代码的健壮性和可维护性。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《点击获取DivID的正确技巧》文章吧，也可关注golang学习网公众号了解相关技术文章。