使用on JQuery事件获取单击的子元素文本
使用jQuery事件获取单击的子元素文本可以通过以下步骤实现：
- 首先，确保在HTML页面中引入了jQuery库文件。可以通过以下方式引入：
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>- 在JavaScript代码中，使用jQuery的事件绑定方法来监听点击事件。可以使用
click()方法来绑定点击事件，然后使用text()方法获取子元素的文本内容。
下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>获取子元素文本</title>
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
</head>
<body>
<div id="parent">
<p>子元素1</p>
<p>子元素2</p>
<p>子元素3</p>
</div>
<script>
$(document).ready(function() {
$('#parent').on('click', 'p', function() {
var text = $(this).text();
console.log(text);
});
});
</script>
</body>
</html>在上面的示例中，我们通过$('#parent')选择器选中了父元素，然后使用.on('click', 'p', function() { ... })方法来绑定点击事件。其中，'p'表示选择所有的<p>标签作为子元素。在点击事件的回调函数中，使用$(this).text()来获取被点击的子元素的文本内容，并将其打印到控制台中。
这样，当点击父元素中的任意一个子元素时，就会在控制台中输出相应的子元素文本。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。
相关·内容
3回答
如何将复选框和文本显示在代码示例中的同一行中
javascript、bootstrap-4
我在处理引导文本截断。在下面的示例中，复选框和文本位于单独的行上。如何在复选框之后得到文本？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial
浏览 3提问于2020-08-14得票数 0
回答已采纳
2回答
如何使用两个“onclick”事件
javascript
下面是我的代码，为什么当我单击附加文本时它不能工作？
1:点击，这是一个段落.
2:点击附加文本
3:必须用红色显示附加项。
$(document).ready(function(){
$(".ali").click(function(){
$(this).parent().append("<b class='reza'>Appended text</b>");
});
$(".reza").click(function(){
$(this).ap
浏览 5提问于2017-08-31得票数 3
回答已采纳
4回答
利用腾讯云GPU构建深度学习网络？
对象存储、深度学习
如题，本人（学生）想用腾讯云构建一个实验性的深度学习网络，具体要用到腾讯云的哪些服务呢？（GPU，COS），另外还需考虑较低的成本。。。
浏览 1125提问于2017-12-13
1回答
引导5如果没有响应的高度
height、bootstrap-5
如果在引导卡与宽度而不是高度比例尺，我如何使高度响应以及？
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="h
浏览 5提问于2022-08-08得票数 1
回答已采纳
1回答
如何在模板文字js表达式中选择$(this)？
javascript、html、jquery
我知道每次我在函数中调用" this“时，它都会选择选择器在参数中给它的任何东西，但是怎么能像这样使用模板文字并获得append方法中生成的行的索引呢？ $(document).on('click', '.add-row', function () {
$(this).closest("table").find("tbody").append(`
<tr>
<td> ${ $(this).closest("tr").index() } </td
浏览 21提问于2021-09-22得票数 0
回答已采纳
1回答
显示/隐藏错误div函数将I标记检测为div
javascript、html、jquery
我正在尝试创建一个函数，当我单击<div>标签时显示和隐藏<i>，但是<i>标签本身被检测为一个div，所以它会留下一个空格，看起来很糟糕，有人知道如何解决这个问题吗？
function updateItems(tgt, delta) {
var $items = $(tgt).closest("div").children();
var $current = $items.filter('.current');
$current = $current.length ? $current : $items.f
浏览 0提问于2021-04-20得票数 0
3回答
插入/删除平衡
javascript、jquery、html
当我单击按钮时，我想在p标签中添加一个div标签，当我点击一个p标签时，我也想删除我点击的p标签。
这是我的Jquery：
$('#ajou').click(function(){
alert( $('#skill').val());
$('#skills').append('<p>'+$('#skill').val()+'</p>');
});
$("p").click(function(){
$(this).remove();
}
浏览 3提问于2015-11-04得票数 0
回答已采纳
11回答
腾讯云上如何自建DNS？
云服务器、DNS 解析 DNSPod、linux、centos、dns
当前腾讯云私有域VPCDNS暂时还不支持背景下，怎么在腾讯云CVM环境下构建内网解析？
实现功能：
1.支持腾讯云云环境保留域名解析如：mirrors.tencentyun.com;
2.支持用户自有业务域名内部网解析如：you.aaa.com；
3.支持访问外网域名解析如：www.qq.com；
4.支持分域名转发到不同的DNS服务器；
基础环境：
CVM：标准型SA2（请根据自身业务情况，选择样本）
操作系统：CentOS Linux版本7.6.1810（核心）
绑定：bind-9.11.4-16.P
浏览 1395提问于2021-01-27
3回答
jQuery .Click()函数不会多次触发
jquery
因此，我编写了一个HTML页面，当单击某个名称时，该名称会淡出。代码如下所示
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#names").click(function(){
$(this
浏览 33提问于2016-05-24得票数 0
2回答
当使用侦听器函数单击文本框时，停止打开引导手风琴
javascript、html、css
我有一个引导手风琴，我需要防止打开手风琴时，当文本框被点击，而如果有人点击外面的文本框(蓝色区域)，让它像往常一样展开和收缩。
所以我试过
$(".accordion-button").click(function(event) {
//console.log($('.workflowTitle:focus').length)
if($('.workflowTitle:focus').length >= 1)
{
event.stopPropa
浏览 6提问于2022-10-17得票数 1
回答已采纳
2回答
带有vuejs的进度条
css、vue.js
我有一个进度条，当我点击它时，它会递增，但我也在尝试使宽度递增。我尝试将style类绑定到"score“，但这破坏了它。我假设我的任务是增加宽度的一些逻辑。任何帮助都是最好的
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=
浏览 6提问于2018-11-22得票数 0
2回答
为什么表单元素会使我的div占用比没有它更多的空间？
html、css、layout、semantic-ui
我在我的网站上有一个菜单栏，我试图添加一个搜索字段。它在这个网站上已经有一段时间了，但是还没有做任何事情。看上去是这样的：
body {
margin: 14px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/foma
浏览 0提问于2019-06-21得票数 0
回答已采纳
1回答
在引导5弹出时关闭按钮，身体点击关闭弹出式按钮
javascript、jquery、twitter-bootstrap、tooltip、bootstrap-5
我需要关闭弹出按钮，点击内部的data-bs-content在引导5弹出式，也没有功能的翻盖关闭，在身体点击。
以下是我的代码
$(document).ready(function() {
// popover
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popov
浏览 8提问于2022-07-05得票数 0
1回答
如何将ItemName从Select2()下拉列表推送到数据库(SQL)
asp.net-core、jquery-select2
我是asp.net剃须刀页面上的新人
这是我的Html
<div class="form-group row">
<div class="col-4">
<select class="form-control" id="itemslist" name="itemName" asp-items="Model.Itemslist">
<opti
浏览 1提问于2022-02-13得票数 0
回答已采纳
1回答
如何使用wavesurfer.js在jQuery或JavaScript中在HTML中的两个不同的div上播放相同的歌曲
javascript、html、jquery、wavesurfer.js
我想在html中的两个不同的地方播放同一首歌。我用wavesurfer.js来播放这首歌。我希望同样的歌曲应该苍白在页面的某处，以及页的页脚。可能是这样的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Player</title
浏览 7提问于2022-02-01得票数 0
回答已采纳
1回答
Asp-net 3.1如何使用summernote (或任何其他富文本编辑器)编辑字段
javascript、c#、asp.net、asp.net-mvc
我的数据库中有一些包含生成html的字符串的字段，例如"Hello world“。我正在尝试将它们带到一个summernote富文本编辑器中，这样就可以在那里编辑它们。我试过了 <html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
crossorigin="anonymous"></script>
<link href="htt
浏览 30提问于2021-03-17得票数 0
4回答
数据比较多，有什么好点的存储方案吗？
对象存储、文件存储
贵州地区，给公司做类似企业网盘的东西，存储数据大概在6~7T左右，有没有好点的存储方案呢？我看腾讯云这边有COS、CFS等，我是从网站直接读取数据，推荐那个？有没有什么试用渠道呢？
浏览 964提问于2017-09-15
2回答
根据我单击的div获取正确的id。
javascript、html
我有以下动态代码：
var data = [
{codigo: "1", Utente: "Teste", },
{codigo: "2", Utente: "Teste1", },
{codigo: "3", Utente: "Teste2",},
{codigo: "4", Utente: "Teste3", },
{codigo: "5", Utente: "Teste4", },
{cod
浏览 5提问于2022-09-20得票数 0
回答已采纳
1回答
加入选定的select2选项的文本，并设置输入框的值
javascript、jquery、jquery-select2
我有一个输入框和一个select2多选择元素。
在选择新选项时，我希望使用管道字符合并所选选项的文本，并填写输入框。
需要做的一件事是，我的选项可能有一个落后的-，在合并它的文本之前，我需要对它进行修改。基本上，这很好，直到我使用.each()来接受每个选定选项的文本.有人能帮我修一下吗？蒂娅。
(function($) {
$(document).ready(function() {
$('#elems').select2();
});
$('#elems').on('change', function() {
浏览 9提问于2022-11-16得票数 0
回答已采纳
1回答
如何在uikit内使用select2 -下拉列表？
jquery、uikit、jquery-select2
当我使用select2下拉列表在英国-下拉并选择一个选项时，它会自动关闭模式。
以下是代码：
// In your JavaScript code (external .js resource or <script> tag)
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0
浏览 3提问于2020-08-20得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
