在DOM之后加载新元素后检测单击

，可以通过以下步骤实现：

在DOM加载完成后，通过JavaScript代码动态创建新的元素，并将其添加到页面中的指定位置。
为新元素添加单击事件的监听器，可以使用addEventListener方法或直接在HTML标签中添加onclick属性。
在单击事件的处理函数中，可以执行相应的操作，例如显示提示信息、发送请求、更新数据等。
如果需要在新元素加载后立即检测单击事件，可以使用事件委托的方式。即将单击事件监听器添加到新元素的父元素上，通过事件冒泡机制捕获到单击事件，并判断事件源是否为新元素。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>DOM加载后检测单击</title>
</head>
<body>
  <div id="container">
    <!-- 初始的DOM元素 -->
    <button id="btn">点击我</button>
  </div>

  <script>
    // DOM加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
      // 创建新元素
      var newElement = document.createElement('button');
      newElement.textContent = '新按钮';

      // 添加到页面中
      var container = document.getElementById('container');
      container.appendChild(newElement);

      // 单击事件处理函数
      function handleClick(event) {
        if (event.target === newElement) {
          alert('点击了新按钮');
        }
      }

      // 添加单击事件监听器
      container.addEventListener('click', handleClick);
    });
  </script>
</body>
</html>

在上述示例中，我们在DOM加载完成后创建了一个新的按钮元素，并将其添加到id为"container"的div元素中。然后，我们为"container"元素添加了一个单击事件监听器，通过判断事件源是否为新按钮元素，来检测是否点击了新按钮。如果点击了新按钮，就会弹出提示框显示"点击了新按钮"的信息。

对于腾讯云相关产品的推荐，可以根据具体需求选择适合的产品。例如，如果需要在云上部署网站，可以考虑使用腾讯云的云服务器（CVM）产品；如果需要存储大量数据，可以使用腾讯云的对象存储（COS）产品。具体的产品介绍和链接地址可以参考腾讯云官方网站。

在DOM之后加载新元素后检测单击

javascript、html、dom

我正在尝试使用一个简单的getElementById来检测div上的点击--然而，由于api调用是在DOM加载之后发生的，所以JS无法‘找到’任何div，并给出一个错误，并且在我点击元素之后不会做任何事情在从API加载数据之后，我如何检测点击？

浏览 12提问于2019-12-04得票数 0

回答已采纳

4回答

jQuery切换函数在AJAX数据加载后停止工作

php、jquery、html、ajax

AJAX表单成功后，我将删除整个div并从数据库中重新打印它。 // something }); 我在console.log</a> </li><li class="product" id="croissant"&g

浏览 5提问于2014-03-28得票数 2

回答已采纳

1回答

如何检测Anglesharp中dom元素的变化

c#、html-parsing、html-agility-pack、html-parser、anglesharp

我正在使用Anglesharp解析网站-一切正常，但一些信息只有在单击页面上的元素后才会显示，并且它在浏览器中动态发生我可以看到这些更改，但当我解析Anglesharp无法加载DOM元素更改如何使用Anglesharp检测更改并解析来自新元素的数据？

浏览 15提问于2021-06-29得票数 1

1回答

仅在硬刷新后，没有加载Vue/Vue路由器的本地依赖项

javascript、vue.js、vue-router、jscolor

/assets/js/jscolor'; 因此，最基本的情况是，当我对页面本身进行硬刷新时，它是工作的，但是当我从另一个页面路由到页面时(例如，脚本似乎没有加载)，因为着色选择器没有活动。

浏览 1提问于2018-06-20得票数 0

回答已采纳

1回答

用事件后创建的新元素重新加载/刷新DOM

javascript、jquery、dom、browser、refresh

我想访问在某些事件之后创建的元素。原始DOM中缺少这些元素。如果我可以以某种方式重新加载/刷新DOM，那么我将能够访问这些新元素。location.reload();将无法工作，因为它将刷新整个页面，并且我以前的所有值都将丢失，就像inputs一样<div class="some class name"></div> <em

浏览 2提问于2020-07-13得票数 0

回答已采纳

1回答

动态添加元素上的JQuery选择器

jquery、selector

我不知道如何说服JQuery选择一个在页面加载后动态插入到DOM中的元素(而不是绑定处理程序)。如果我有HTML： World!</div>var foo = '<div id="foo">Hello</div>'; $("#bar").before(foo

浏览 1提问于2013-09-09得票数 23

回答已采纳

3回答

jQuery .click()问题

jquery、click

我有一个简单的jQuery脚本。我使用.ajax()从我的数据库中获取一些信息，它工作得很完美。当我点击我的.info链接时，我想做一些事情。我已经尝试过以下代码： e.preventDefault(); }); $('a').

浏览 2提问于2011-02-11得票数 0

1回答

使用prototype时未处理单击事件(使用lowpro)

javascript、prototypejs、lowpro

因此，当我单击“上移”时，我想要将该元素的父级上移。和a.move-down假设将它向下移动。document.observe('dom:loaded', function() { 'a.move-up:click': function但是，这些单击事件不会得到处理。当我单击JS支持的链接时，我甚

浏览 1提问于2010-09-17得票数 1

回答已采纳

2回答

jQuery向尚未加载的元素添加文本

jquery、load、addclass

我有一个链接，当单击该链接时，将创建一个新的DOM元素，其中包含几个子元素。我试图在这个新元素中添加一个类名，如下所示： jQuery(document).ready( function($('tr#edit-65').addClass('someclass'); }); 因此，tr#post-6

浏览 6提问于2016-04-12得票数 0

回答已采纳

1回答

检测未来的元素存在并做一些事情

javascript、jquery

我使用了一个插件，它将在我的DOM中创建新元素，但不幸的是，它在插件初始化后没有回调。因此，我正在考虑捕获新创建的DOM并执行某些函数。什么是倾听未来因素的最佳方式？我试过两种方法使用livequery插件()这项工作，但不利于性能。在我接下即将到来的新元素之后，它还在运行。

浏览 3提问于2015-04-05得票数 0

回答已采纳

2回答

无法删除行后，我通过按钮- HTML/JS插入它

javascript、html、jquery、html-table

我有一个桌子，我填补后，文件上传。上传文件时，我可以删除选定的行。 cell2.innerHTML = '<img class="table-remove" style="height:15px;" src="images/delete.png">';单击;删除行 $('.table-remove').click(function ()

浏览 8提问于2022-05-04得票数 0

回答已采纳

1回答

这是一个有趣的情况。从另一个js文件结果中调用ajax删除函数

javascript、php、ajax、autoload

ajax/js函数正常工作很好；但是在加载了无限滚动记录之后，我很难让它工作。我的页面看起来相当复杂，所以这里有一个简化的版本。

浏览 2提问于2014-04-13得票数 0

回答已采纳

1回答

Lightbox未加载动态选择器

javascript、jquery、html、forms、lightbox

在这方面真的需要一些帮助：现在，它在lightbox之外工作得非常好，所以直接放在body上，但是一旦我把它放在lightbox内的表单中，它就失败了。<script> var usCities = ['Alab

浏览 1提问于2014-07-26得票数 0

2回答

jquery UI对话框展开

jquery、jquery-ui-dialog

我想创建一个jquery UI对话框，它能够在单击按钮时展开以显示更多字段。有谁有主意吗？

浏览 1提问于2010-12-03得票数 0

回答已采纳

1回答

神奇的PopUp不能处理动态添加的元素

javascript、laravel-5、magnific-popup、magnification-api

我们在我们的网站中使用Magnific库来显示PopUps。一切都很顺利，除了一件事。当我们动态添加一个元素时，弹出窗口对动态添加的元素不起作用。换句话说，没有在DOM中为新添加的元素注册click事件。

浏览 11提问于2017-06-15得票数 0

1回答

plone/jquery -当表单作为弹出覆盖打开时，是什么导致javascript不工作？

jquery、plone

在浏览器视图页面中，我有一个在单击链接时打开的表单，它使用jquery在我的资源文件夹中的javascript文件中打开： $(".openCT我是否需要包含一些内容，以便jquery/javascript能够在弹出的覆盖层中工作？

浏览 2提问于2016-04-05得票数 1

回答已采纳

4回答

Ajax响应上的Jquery事件

php、jquery、html、ajax

如何在ajax请求创建的元素上为.click()事件运行jquery函数？$(".links").click(function(){alert("aaaa");}) 我也尝试过使用"links“作为id。我需要它作为分页系统。

浏览 0提问于2011-06-13得票数 4

回答已采纳

2回答

javaScript可以在ajax调用中使用新添加的DOM elemet吗？

javascript、jquery、ajax

$(document).ready(function () {这表明如下所示:- 1.脚本将在文档完成加载时运行2.当单击DCSort DOM元素时。我的问题如下：-假设在加载了文档之后，一个带有DCsort的新元素取代了旧的DCSort元素，那么当新添加的DCSort元素已经使用Ajax调用添加并且我使用单击它时，原始的javaScrip会触发吗？

浏览 2提问于2014-05-07得票数 1

回答已采纳

2回答