jQuery .on 点击生成的元素
Posted
技术标签:
【中文标题】jQuery .on 点击生成的元素【英文标题】：jQuery .on click on generated element 【发布时间】：2022-01-20 19:57:41 【问题描述】：您好，我想构建一个导航，通过单击生成的向下箭头弹出子菜单。 可悲的是我无法触发点击事件。我读了一些关于这个主题的答案，但他们不想工作。我尝试了带有附加选择器的 .on 方法，并在调用前检查了选择器，但按钮只是不想触发。
html 菜单：
<ul class="menu-links">
<li><a href="#">Nur Link</a></li>
<li class="has-subs"><a href="#">Nur untermenu Test</a>
<ul>
<li><a href='#'>Das ist ein Linktitel</a></li>
<li><a href='#'>Das ist ein Linktitel</a></li>
<li><a href='#'>Das ist ein Linktitel</a></li>
<li><a href='#'>Das ist ein Linktitel</a></li>
</ul>
</li>
<li><a href="#">Links zu lang</a></li>
<li><a href="#">Links mit Favs</a></li>
<li><a href="#">Links mit CTA</a></li>
<li><a href="#">Links mit Bild</a></li>
<li><a href="#">Alles</a></li>
</ul>
JS：
function checkSize()
let size = parseInt($('#responsive-check').css('content').replace('"', ''));
gSize = size;
$(window).on('resize', function (e)
let size = parseInt($('#responsive-check').css('content').replace('"', ''));
gSize = size;
);
function modalEvents()
let modalOpen
let $tgt = $('#bars').children('i');
$('#mobMenu').on('show.bs.modal', function (e)
$tgt.removeClass('bi-list');
$tgt.addClass('bi-x');
);
$('#mobMenu').on('hidden.bs.modal', function (e)
$tgt.removeClass('bi-x');
$tgt.addClass('bi-list');
);
var navM =
settings:
$tgt: $('#main-nav')
,
g:
$trigMenu : $('#bars'),
$data : $('.nav-items')
,
init: function (options)
jQuery.extend(navM.settings, options);
navM.openMobile();
modalEvents();
navM.collapsedMenu();
,
openMobile: function ()
let $tgtI = navM.g.$trigMenu.children("i");
navM.g.$trigMenu.on('click', function ()
if ($tgtI.hasClass('bi-list'))
dynModal.init("open", navM.g.$data.html());
else
dynModal.init("close", '');
)
,
collapsedMenu:function()
navM.g.$data.find('.menu-links li').each(function(i)
let $t = $(this);
var $button = $('<div></div>').addClass('subs').html('<i class="bi bi-caret-down-fill"></i>');
if($t.children('ul').length>0)
$t.wrapInner('<div></div>').append('');
$button.clone(true).appendTo($t.find('div'));
console.log($t);
console.log($button);
$t.children('div').on("click",'.subs', function()
console.log('Make me happy!!!!');
);
)
var dynModal =
init: function (op, data)
let $tgt = $('#mobMenu');
let $tgtCnt = $tgt.find('.modal-body');
if (op == "open")
$tgtCnt.html(data);
$tgt.modal('show');
else
$tgtCnt.html('');
$tgt.modal('hide');
#responsive-checkdisplay:none;content:"0".top-navdisplay:nonenav#main-navheight:55px;background:#ededed;display:flex;flex-direction:row;justify-content:space-between;padding:0 15px;box-shadow:rgba(0,0,0,0.1) 0 4px 12px;border-bottom:2px solid #fff;position:fixed;z-index:99999;width:100%;top:0nav#main-nav ullist-style:none;margin:0;padding:0nav#main-nav .logo imgmax-height:35px;width:auto;margin-top:10pxnav#main-nav .resp-navdisplay:flex;flex-direction:row;align-items:centernav#main-nav .resp-nav .btnbackground-color:#fff;display:block;margin:5px 8px 0!important;padding:4px 10px;border:transparentnav#main-nav .resp-nav .btn icolor:#EF7300;font-size:20px;color:#894200;transition:color,.5s ease-in-outnav#main-nav .resp-nav .btn:hover icolor:#ffa756.nav-itemsdisplay:none.menu-linkslist-style:none;padding:0;margin:0.menu-links lipadding:10px 5px;transition:all,.5s;border-bottom:#ccc 1px solid.menu-links li adisplay:block;text-decoration:none;font-family:roboto;font-size:15px;color:#222;flex-grow:2.menu-links li ullist-style:none;margin:0;padding:0 0 0 10px;display:none.menu-links li ul liborder-bottom:0;color:#333.menu-links li ul li:aftercontent:"";display:block;width:100px;height:1px;background-color:#ccc;width:0;transition:width,.5s.menu-links li ul li:hover:afterwidth:100px.menu-links li.has-subs divdisplay:flex;flex-direction:row;justify-content:space-between.menu-links li.has-subs div div.subsbackground-color:#EF7300;margin:-10px -5px -10px 0;padding-top:10px;transition:background-color,.5s;cursor:pointer.menu-links li.has-subs div div.subs icolor:#fff;margin:8px.menu-links li.has-subs div div.subs:hoverbackground-color:#ffa756.menu-links li:hover,.menu-links li.has-subs:hoverbackground-color:#fff;padding-left:10pxformdisplay:flex;flex-direction:row;margin-bottom:15px;align-items:centerform input.search-fieldwidth:100%;border-top-left-radius:50px;border-bottom-left-radius:50px;padding:5px;border:0;padding:5px 15pxform input.search-field:active,form input.search-field:focus-visible,form input.search-field:focusborder-color:transparent!important;border:0form button.search-submitbackground-color:#fff;border:0;border-top-right-radius:50px;border-bottom-right-radius:50px;padding:6px 10px 5pxform button.search-submit ibackground-color:#EF7300;border-radius:40px;padding:3px 7px;color:#fff;transition:background-color,.5sform button.search-submit i:hoverbackground-color:#894200#mobMenu .modal-bodybackground-color:#ddd@media (min-width:576px)#responsive-checkdisplay:none;content:"576"@media (min-width:768px)#responsive-checkdisplay:none;content:"768"<!doctype html>
<html lang="en">
<head>
<title>Standard Template</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS v5.0.2 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Bootstrap icon Font -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.6.1/font/bootstrap-icons.css">
<!-- CSS IMPORTE-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap" rel="stylesheet">
<!-- Benutzerdeffinierte CSS -->
</head>
<body>
<div class="modal hide fade mt-4" id="mobMenu" data-bs-backdrop="false" tabindex="-1" aria-hidden="true">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-body pt-5">
</div>
</div>
</div>
</div>
<!-- Obere Navigation-->
<nav class="top-nav">
<div class="container-fluid">
<div class="d-flex justify-content-between">
<div class="top-phone">
<i class="bi bi-telephone-fill"></i> 040 / 225 689 788 <span class="spacer"></span><i class="bi bi-envelope-fill"></i> <a href="#">info@test.de</a>
</div>
<div class="top-links">
<a href="#">Impressum</a> <span class="spacer"></span> <a href="#">Datenschutzverordnung</a> <span class="spacer"></span> <a href="#">Kontakt</a>
</div>
</div>
</div>
</nav>
<!-- Hauptnavigation-->
<nav id="main-nav">
<a href="#" class="logo"><img src="img/logo.png"></a>
<div class="resp-nav">
<buttton class="btn btn-primary" id="bars"><i class="bi bi-list mob-menu"></i></buttton>
<buttton class="btn btn-secondary" class="cart"><i class="bi bi-cart-fill"></i></buttton>
</div>
</nav>
<div class="nav-items">
<form>
<input type="input" placeholder="Suchbegriff" class="search-field">
<button type="submit" class="search-submit"><i class="bi bi-search"></i></button>
</form>
<ul class="menu-links">
<li><a href="#">Nur Link</a></li>
<li class="has-subs"><a href="#">Nur untermenu Test</a>
<ul>
<li><a href='#'>Das ist ein Linktitel</a></li>
<li><a href='#'>Das ist ein Linktitel</a></li>
<li><a href='#'>Das ist ein Linktitel</a></li>
<li><a href='#'>Das ist ein Linktitel</a></li>
</ul>
</li>
<li><a href="#">Links zu lang</a></li>
<li><a href="#">Links mit Favs</a></li>
<li><a href="#">Links mit CTA</a></li>
<li><a href="#">Links mit Bild</a></li>
<li><a href="#">Alles</a></li>
</ul>
</div>
<div id="responsive-check"></div>
<!-- Bootstrap javascript Libraries -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- Zusätzliche Bibliotheken -->
<!-- JSON-->
<!-- Benutzerdeffiniertes JS -->
</body>
</html>collapsedMenu:function()
navM.g.$data.find('.menu-links li').each(function(i)
let $t = $(this);
var $button = $('<div></div>').addClass('subs').html('<i class="bi bi-caret-down-fill"></i>');
if($t.children('ul').length>0)
$t.wrapInner('<div></div>').append('');
$button.clone(true).appendTo($t.find('div'));
console.log($t);
console.log($button);
$t.children('div').on("click",$button, function()
console.log('make me happy!!!!!!');
);
)
【问题讨论】：
【参考方案1】：在openMobile 函数中，您将html 放入模态dynModal.init("open", navM.g.$data.html());，这会导致非活动事件。
你需要这样改变：
dynModal.init("open", navM.g.$data);
在模态变量中：
$tgtCnt.html(data.children());
完整代码在这里：
function modalEvents()
let modalOpen
let $tgt = $('#bars').children('i');
$('#mobMenu').on('show.bs.modal', function (e)
$tgt.removeClass('bi-list');
$tgt.addClass('bi-x');
);
$('#mobMenu').on('hidden.bs.modal', function (e)
$tgt.removeClass('bi-x');
$tgt.addClass('bi-list');
);
var navM =
settings:
$tgt: $('#main-nav')
,
g:
$trigMenu: $('#bars'),
$data: $('.nav-items'),
$modal: $('#mobMenu')
,
init: function (options)
jQuery.extend(navM.settings, options);
navM.openMobile();
modalEvents();
navM.collapsedMenu();
,
openMobile: function ()
let $tgtI = navM.g.$trigMenu.children("i");
navM.g.$trigMenu.on('click', function ()
if ($tgtI.hasClass('bi-list'))
dynModal.init("open", navM.g.$data);
else
dynModal.init("close", '');
)
,
collapsedMenu: function ()
navM.g.$data.find('.menu-links li').each(function (i)
let $t = $(this);
var $button = $('<div></div>').addClass('subs').html('<i class="bi bi-caret-down-fill"></i>');
if ($t.children('ul').length > 0)
$t.wrapInner('<div></div>').append('');
$button.clone(true).appendTo($t.find('div'));
$t.children('div').on("click",$button, function()
console.log('make me happy!!!!!!');
);
)
var dynModal =
init: function (op, data)
let $tgt = $('#mobMenu');
let $tgtCnt = $tgt.find('.modal-body');
if (op == "open")
$tgtCnt.html(data.children());
$tgt.modal('show');
else
$tgtCnt.html('');
$tgt.modal('hide');
navM.init()#responsive-checkdisplay: none;content: "0".top-navdisplay: nonenav#main-navheight: 55px;background: #ededed;display: flex;flex-direction: row;justify-content: space-between;padding: 0 15px;box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;border-bottom: 2px solid #fff;position: fixed;z-index: 99999;width: 100%;top: 0nav#main-nav ullist-style: none;margin: 0;padding: 0nav#main-nav .logo imgmax-height: 35px;width: auto;margin-top: 10pxnav#main-nav .resp-navdisplay: flex;flex-direction: row;align-items: centernav#main-nav .resp-nav .btnbackground-color: #fff;display: block;margin: 5px 8px 0 !important;padding: 4px 10px;border: transparentnav#main-nav .resp-nav .btn icolor: #EF7300;font-size: 20px;color: #894200;transition: color, .5s ease-in-outnav#main-nav .resp-nav .btn:hover icolor: #ffa756.nav-itemsdisplay: none.menu-linkslist-style: none;padding: 0;margin: 0.menu-links lipadding: 10px 5px;transition: all, .5s;border-bottom: #ccc 1px solid.menu-links li adisplay: block;text-decoration: none;font-family: roboto;font-size: 15px;color: #222;flex-grow: 2.menu-links li ullist-style: none;margin: 0;padding: 0 0 0 10px;display: none.menu-links li ul liborder-bottom: 0;color: #333.menu-links li ul li:aftercontent: "";display: block;width: 100px;height: 1px;background-color: #ccc;width: 0;transition: width, .5s.menu-links li ul li:hover:afterwidth: 100px.menu-links li.has-subs divdisplay: flex;flex-direction: row;justify-content: space-between.menu-links li.has-subs div div.subsbackground-color: #EF7300;margin: -10px -5px -10px 0;padding-top: 10px;transition: background-color, .5s;cursor: pointer.menu-links li.has-subs div div.subs icolor: #fff;margin: 8px.menu-links li.has-subs div div.subs:hoverbackground-color: #ffa756.menu-links li:hover, .menu-links li.has-subs:hoverbackground-color: #fff;padding-left: 10pxformdisplay: flex;flex-direction: row;margin-bottom: 15px;align-items: centerform input.search-fieldwidth: 100%;border-top-left-radius: 50px;border-bottom-left-radius: 50px;padding: 5px;border: 0;padding: 5px 15pxform input.search-field:active, form input.search-field:focus-visible, form input.search-field:focusborder-color: transparent !important;border: 0form button.search-submitbackground-color: #fff;border: 0;border-top-right-radius: 50px;border-bottom-right-radius: 50px;padding: 6px 10px 5pxform button.search-submit ibackground-color: #EF7300;border-radius: 40px;padding: 3px 7px;color: #fff;transition: background-color, .5sform button.search-submit i:hoverbackground-color: #894200#mobMenu .modal-bodybackground-color: #ddd@media (min-width: 576px)#responsive-checkdisplay: none;content: "576"@media (min-width: 768px)#responsive-checkdisplay: none;content: "768"<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.6.1/font/bootstrap-icons.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<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.2/dist/js/bootstrap.bundle.min.js"></script>
<div class="modal hide fade mt-4" id="mobMenu" data-bs-backdrop="false" tabindex="-1" aria-hidden="true">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-body pt-5">
</div>
</div>
</div>
</div>
<!-- Obere Navigation-->
<nav class="top-nav">
<div class="container-fluid">
<div class="d-flex justify-content-between">
<div class="top-phone">
<i class="bi bi-telephone-fill"></i> 040 / 225 689 788 <span class="spacer"></span><i
class="bi bi-envelope-fill"></i> <a href="#">info@test.de</a>
</div>
<div class="top-links">
<a href="#">Impressum</a> <span class="spacer"></span> <a href="#">Datenschutzverordnung</a> <span
class="spacer"></span> <a href="#">Kontakt</a>
</div>
</div>
</div>
</nav>
<!-- Hauptnavigation-->
<nav id="main-nav">
<a href="#" class="logo"><img src="img/logo.png"></a>
<div class="resp-nav">
<buttton class="btn btn-primary" id="bars"><i class="bi bi-list mob-menu"></i></buttton>
<buttton class="btn btn-secondary" class="cart"><i class="bi bi-cart-fill"></i></buttton>
</div>
</nav>
<div class="nav-items">
<form>
<input type="input" placeholder="Suchbegriff" class="search-field">
<button type="submit" class="search-submit"><i class="bi bi-search"></i></button>
</form>
<ul class="menu-links">
<li><a href="#">Nur Link</a></li>
<li class="has-subs"><a href="#">Nur untermenu Test</a>
<ul>
<li><a href='#'>Das ist ein Linktitel</a></li>
<li><a href='#'>Das ist ein Linktitel</a></li>
<li><a href='#'>Das ist ein Linktitel</a></li>
<li><a href='#'>Das ist ein Linktitel</a></li>
</ul>
</li>
<li><a href="#">Links zu lang</a></li>
<li><a href="#">Links mit Favs</a></li>
<li><a href="#">Links mit CTA</a></li>
<li><a href="#">Links mit Bild</a></li>
<li><a href="#">Alles</a></li>
</ul>
</div>
<div id="responsive-check"></div>【讨论】：
老实说，我真的看不出有什么区别。在我之前的代码中，我为模态传递了一个 html 字符串。你交出一个 jquery 对象，但最后 .html() 也将你的对象转换为 html 字符串。 您可以尝试在我的答案中运行代码 sn-p 吗？我让它工作了。navM.g.$data.html() 是 html 内容字符串，navM.g.$data.children() 是代表一组 DOM 元素的 jQuery 对象。
你说得对，我想我应该在解决这个问题之前先睡一觉。我认为我的错误是我试图在 html 字符串而不是 jquery 对象中定位 jQuery 对象，对吗？
没错！快乐编码以上是关于jQuery .on 点击生成的元素的主要内容，如果未能解决你的问题，请参考以下文章
JQuery .on() 没有将点击事件绑定到动态创建的元素[重复]
jquery on()绑定的点击事件在js动态新添加的元素上无效，请问为啥
jQuery on()方法绑定动态元素的点击事件无响应的解决办法