【发布时间】：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"
alt="creator"
/>
<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"
width="18"
height="18"
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-width="2"
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-width="2"
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"
alt="img"
/>
</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"
alt="creator"
/>
<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"
width="18"
height="18"
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-width="2"
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-width="2"
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"
alt="img"
/>
</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 我已经搜索过了，你的意思是更清洁？
标签： javascript jquery reactjs dynamic dropdown