动态添加的下拉菜单不应用 jQuery
Posted
技术标签:
【中文标题】动态添加的下拉菜单不应用 jQuery【英文标题】：Dynamically Added Dropdown not applying jQuery 【发布时间】：2021-12-03 15:56:45 【问题描述】：我在我的 react 项目中使用 bootstrap 和 jquery。单击时我有一个按钮应更改为下拉字段。如果我正常放置，下拉菜单可以工作，但是一旦我动态调用它，它就不再工作了。这是我的代码：
当我这样使用它时；它有效
<div className="profile-otr">
<a className="profile-inr click-open3">
<img
className="creator"
src="../assets/img/favicon-32.png"
/>
<p className="price body-sb">ellipseAddress(address)</p>
</a>
<div className="icon-hover-2 click-event3">
<h5 className="heading heading-h5">The Lucky Being</h5>
<div className="copy-icon-otr">
<p className="desc body-s">ellipseAddress(address)</p>
<svg
className="copy-icon"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.636 12.636H15a2 2 0 002-2V3a2 2 0 00-2-2H7.364a2 2 0 00-2 2v2.364"
stroke="#CFCFCF"
stroke-
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M10.636 5.364H3a2 2 0 00-2 2V15a2 2 0 002 2h7.636a2 2 0 002-2V7.364a2 2 0 00-2-2z"
stroke="#CFCFCF"
stroke-
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div className="box-otr">
<div className="img-otr">
<img
className="img-eht"
src="../assets/img/ethereum.png"
/>
</div>
<div className="price-otr">
<p className="desc body-s">Current Balance</p>
<h5 className="heading heading-h5">3.067 ETH</h5>
</div>
</div>
<ul className="link-profile-otr">
<li className="link-profile-inr">
<span className="circle-hover"></span>
<a href="#" className="profile body-sb">
My Profile
</a>
</li>
<li className="link-profile-inr">
<span className="circle-hover"></span>
<a href="#" className="profile body-sb">
My Items
</a>
</li>
<li className="link-profile-inr">
<span className="circle-hover"></span>
<a href="#" className="profile body-sb">
Manage Funds
</a>
</li>
<li className="link-profile-inr">
<span className="circle-hover"></span>
<a href="#" className="profile body-sb">
Disconnect
</a>
</li>
</ul>
</div>
</div>
但是当我设置一个条件语句时，像这样；已经不行了
!address ? (
<div className="action-otr">
<a onClick=connect className="btn-fill btn-wallet">
Connect Wallet
</a>
</div>
) : (
<div className="profile-otr">
<a className="profile-inr click-open3">
<img
className="creator"
src="../assets/img/favicon-32.png"
/>
<p className="price body-sb">ellipseAddress(address)</p>
</a>
<div className="icon-hover-2 click-event3">
<h5 className="heading heading-h5">The Lucky Being</h5>
<div className="copy-icon-otr">
<p className="desc body-s">ellipseAddress(address)</p>
<svg
className="copy-icon"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.636 12.636H15a2 2 0 002-2V3a2 2 0 00-2-2H7.364a2 2 0 00-2 2v2.364"
stroke="#CFCFCF"
stroke-
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M10.636 5.364H3a2 2 0 00-2 2V15a2 2 0 002 2h7.636a2 2 0 002-2V7.364a2 2 0 00-2-2z"
stroke="#CFCFCF"
stroke-
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div className="box-otr">
<div className="img-otr">
<img
className="img-eht"
src="../assets/img/ethereum.png"
/>
</div>
<div className="price-otr">
<p className="desc body-s">Current Balance</p>
<h5 className="heading heading-h5">3.067 ETH</h5>
</div>
</div>
<ul className="link-profile-otr">
<li className="link-profile-inr">
<span className="circle-hover"></span>
<a href="#" className="profile body-sb">
My Profile
</a>
</li>
<li className="link-profile-inr">
<span className="circle-hover"></span>
<a href="#" className="profile body-sb">
My Items
</a>
</li>
<li className="link-profile-inr">
<span className="circle-hover"></span>
<a href="#" className="profile body-sb">
Manage Funds
</a>
</li>
<li className="link-profile-inr">
<span className="circle-hover"></span>
<a href="#" className="profile body-sb">
Disconnect
</a>
</li>
</ul>
</div>
</div>
)
这是我的 jQuery 代码：
$(document).ready(function ()
$(".click-open3").click(function ()
$(".click-event3").toggleClass("displayblock");
$(".click-event2").removeClass("displayblock");
$(".click-event1").removeClass("displayblock");
);
$(".click-open2").click(function ()
$(".click-event2").toggleClass("displayblock");
$(".click-event3").removeClass("displayblock");
$(".click-event1").removeClass("displayblock");
);
$(".click-open1").click(function ()
$(".click-event1").toggleClass("displayblock");
$(".click-event2").removeClass("displayblock");
$(".click-event3").removeClass("displayblock");
);
$(".burger-click").click(function ()
$(".click-event1").removeClass("displayblock");
$(".click-event2").removeClass("displayblock");
$(".click-event3").removeClass("displayblock");
);
);
我在网上搜索并阅读了不同的文章和堆栈溢出解决方案，但似乎没有一个有效，我被困在需要帮助的地方。
【问题讨论】：
搜索“如何在动态添加的元素上添加事件” 另外，这段代码会干净很多 @MuhammadUsman 我已经搜索过了，你的意思是更清洁？ 【参考方案1】：您可以在jQuery 中使用fadeToggle，而不是切换class
$("[class^='.click-'], .burger-click").click(function()
$(YOUR_ELEMENT).fadeToggle();
);
【讨论】：
以上是关于动态添加的下拉菜单不应用 jQuery的主要内容，如果未能解决你的问题，请参考以下文章