javascript - Javascript 不适用于使用 jquery .append() 方法创建的元素
问题描述
我有一个用 jquery 编写的代码。单击 ul 列表中的 li 元素会创建 2 个新 div。我使用 .append() 方法来做到这一点。但我有一个问题。我稍后使用 append() 方法创建的 div 中没有 javascript (jquery) 代码有效。第一个原始元素正在工作，但我后来创建的两个元素不起作用
这是我的附加功能：
$(".chat_wrap_dublicate").append(`
<div class="chat_box_wrap" id="duplicater${count}">
<div class="chat_box_header">
<div class="chat_box_header_left">
<svg
width="13"
height="13"
viewBox="0 0 13 13"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="6.5" cy="6.5" r="6.5" fill="#24904A" />
</svg>
<p>Write Us</p>
</div>
<div class="chat_box_header_right">
<ul class="chat_box_right_button_collapse${count}">
<li class="chat_box_right_button_collapse_li">
<p>Clear chat</p>
<svg
width="12"
height="15"
viewBox="0 0 12 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.68716 0.890782H7.25212V1.30577H8.17842V0.832687C8.17853 0.373561 7.79026 0 7.31301 0H4.62627C4.14901 0 3.76074 0.373561 3.76074 0.832687V1.30577H4.68716V0.890782Z"
fill="#929292"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M1.62163 4.83496H10.3176C10.5559 4.83496 10.7435 5.03041 10.7242 5.25885L9.99716 13.9026C9.95665 14.3853 9.53806 14.757 9.03516 14.757H2.90399C2.40109 14.757 1.9825 14.3853 1.94199 13.9028L1.21498 5.25885C1.19577 5.03041 1.38335 4.83496 1.62163 4.83496ZM3.69821 13.8359C3.70781 13.8359 3.71753 13.8355 3.72725 13.835C3.98251 13.8198 4.17676 13.6086 4.16095 13.363L3.70547 6.26683C3.68978 6.02117 3.46907 5.83484 3.21463 5.8497C2.95938 5.86479 2.76513 6.07611 2.78082 6.32166L3.23641 13.4179C3.25152 13.6541 3.45537 13.8359 3.69821 13.8359ZM6.43799 13.3905C6.43799 13.6364 6.23063 13.8358 5.97479 13.8358C5.71895 13.8358 5.51158 13.6364 5.51158 13.3905V6.29419C5.51158 6.04819 5.71895 5.8488 5.97479 5.8488C6.23051 5.8488 6.43799 6.04819 6.43799 6.29419V13.3905ZM8.72346 13.4166L9.15845 6.32042C9.17344 6.07487 8.9786 5.864 8.72323 5.84959C8.46715 5.83506 8.24867 6.02241 8.23368 6.26796L7.79881 13.3643C7.7837 13.6098 7.97854 13.8206 8.23391 13.8351C8.24316 13.8355 8.25241 13.8358 8.26155 13.8358C8.50486 13.8358 8.70906 13.6533 8.72346 13.4166Z"
fill="#929292"
/>
<path
d="M11.9195 3.46067L11.6153 2.58385C11.5351 2.35271 11.31 2.19678 11.0565 2.19678H0.882723C0.629341 2.19678 0.404178 2.35271 0.324088 2.58385L0.0198895 3.46067C-0.0387724 3.62977 0.03757 3.80226 0.180068 3.88827C0.238144 3.92329 0.306876 3.94434 0.382399 3.94434H11.557C11.6325 3.94434 11.7013 3.92329 11.7593 3.88816C11.9018 3.80214 11.9781 3.62966 11.9195 3.46067Z"
fill="#929292"
/>
</svg>
</li>
<li class="chat_box_right_button_collapse_li">
<p>Mute</p>
<svg
width="12"
height="17"
viewBox="0 0 17 13"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3.46804 2.94238H1.15602C0.516302 2.94238 0 3.45171 0 4.08273V8.89177C0 9.52274 0.516302 10.0321 1.15602 10.0321H3.46804C3.68386 10.0321 3.85338 9.86484 3.85338 9.652V3.3225C3.85338 3.10961 3.68386 2.94238 3.46804 2.94238Z"
fill="#929292"
/>
<path
d="M9.16848 0.106773C8.75237 -0.083285 8.28991 -0.0148386 7.94313 0.27405L4.72168 2.91966V10.0474C4.72168 10.0474 4.72168 10.0474 4.72168 10.055L7.94316 12.7006C8.28221 12.9895 8.7524 13.0579 9.16851 12.8679C9.58462 12.6778 9.839 12.2749 9.839 11.8263V1.14834C9.83897 0.699781 9.5846 0.296832 9.16848 0.106773Z"
fill="#929292"
/>
<path
d="M9.83897 6.36377V11.8266C9.83897 12.2751 9.5846 12.678 9.16848 12.8681C8.75237 13.0582 8.28218 12.9898 7.94313 12.7009L4.72168 10.0552C4.72168 10.0476 4.72168 10.0476 4.72168 10.0476V6.36377H9.83897Z"
fill="#929292"
/>
<path
d="M15.1805 9.19052C15.4249 9.4574 15.831 9.4574 16.0754 9.19052C16.3082 8.9363 16.3082 8.53247 16.0754 8.27825L12.3395 4.1987C12.0951 3.93181 11.689 3.93181 11.4446 4.1987C11.2118 4.45292 11.2118 4.85674 11.4446 5.11096L15.1805 9.19052Z"
fill="#929292"
stroke="#929292"
stroke-width="0.5"
/>
<path
d="M11.4446 8.27825L11.6257 8.44409L11.4446 8.27825C11.2118 8.53247 11.2118 8.9363 11.4446 9.19052C11.689 9.4574 12.0951 9.4574 12.3395 9.19052L16.0754 5.11096C16.3082 4.85674 16.3082 4.45292 16.0754 4.1987C15.831 3.93181 15.4249 3.93181 15.1805 4.1987L11.4446 8.27825Z"
fill="#929292"
stroke="#929292"
stroke-width="0.5"
/>
</svg>
</li>
</ul>
<svg
id="chat_box_drop_btn${count}"
width="30"
height="21"
viewBox="0 0 30 21"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="30" height="21" rx="4" fill="#D1CECE" />
<circle cx="9" cy="11" r="2" fill="white" />
<circle cx="15.1538" cy="11" r="2" fill="white" />
<circle cx="21.3076" cy="11" r="2" fill="white" />
</svg>
<svg
id="chat_box_collapse_btn${count}"
width="21"
height="21"
viewBox="0 0 21 21"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.0625 21H3.9375C1.76271 21 0 19.2373 0 17.0625V3.9375C0 1.76271 1.76271 0 3.9375 0H17.0625C19.2373 0 21 1.76271 21 3.9375V17.0625C21 19.2373 19.2373 21 17.0625 21Z"
fill="#929292"
/>
<rect
x="16.0776"
y="9.9668"
width="1.30951"
height="10.9126"
rx="0.654755"
transform="rotate(90 16.0776 9.9668)"
fill="white"
/>
</svg>
<svg
id="chat_box_close_btn${count}"
width="21"
height="21"
viewBox="0 0 21 21"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.0625 21H3.9375C1.76271 21 0 19.2373 0 17.0625V3.9375C0 1.76271 1.76271 0 3.9375 0H17.0625C19.2373 0 21 1.76271 21 3.9375V17.0625C21 19.2373 19.2373 21 17.0625 21Z"
fill="#929292"
/>
<rect
x="14.0166"
y="6.2998"
width="1.30951"
height="10.9126"
rx="0.654755"
transform="rotate(45 14.0166 6.2998)"
fill="white"
/>
<rect
x="14.9424"
y="14.0166"
width="1.30951"
height="10.9126"
rx="0.654755"
transform="rotate(135 14.9424 14.0166)"
fill="white"
/>
</svg>
</div>
</div>
<div class="chat_box_body_wrap">
<div class="chat_box_sender_wrap">
<div class="chat_box_sender_about_wrap">
<a href="#" class="chat_box_sender_name">Wandy Buffet</a>
<p class="chat_box_sender_text">
Commodi modi cumque voluptatem asperiores magnam reprehenderit.
</p>
</div>
<div class="chat_box_sender_about">
<a href="#">
<img
class="chat_box_sender_img"
src="/assets/img/dummy1.png"
alt=""
/>
</a>
<p class="chat_box_sender_time">15:15</p>
</div>
</div>
<div class="chat_box_receiver_wrap">
<div class="chat_box_receiver_about">
<a href="#">
<img
class="chat_box_receiver_img"
src="/assets/img/dummy1.png"
alt=""
/>
</a>
<p class="chat_box_receiver_time">15:15</p>
</div>
<div class="chat_box_receiver_about_wrap">
<a href="#" class="chat_box_receiver_name">Wandy Buffet</a>
<p class="chat_box_receiver_text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam
quos nostrum exercitationem quas
</p>
</div>
</div>
<div class="chat_box_receiver_wrap">
<div class="chat_box_receiver_about">
<a href="#">
<img
class="chat_box_receiver_img"
src="/assets/img/dummy1.png"
alt=""
/>
</a>
<p class="chat_box_receiver_time">15:15</p>
</div>
<div class="chat_box_receiver_about_wrap">
<a href="#" class="chat_box_receiver_name">Wandy Buffet</a>
<p class="chat_box_receiver_text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam
quos nostrum exercitationem quas
</p>
</div>
</div>
<div class="chat_box_sender_wrap">
<div class="chat_box_sender_about_wrap">
<a href="#" class="chat_box_sender_name">Wandy Buffet</a>
<p class="chat_box_sender_text">
Commodi modi cumque voluptatem asperiores magnam reprehenderit.
</p>
</div>
<div class="chat_box_sender_about">
<a href="#">
<img
class="chat_box_sender_img"
src="/assets/img/dummy1.png"
alt=""
/>
</a>
<p class="chat_box_sender_time">15:15</p>
</div>
</div>
<div class="chat_box_receiver_wrap">
<div class="chat_box_receiver_about">
<a href="#">
<img
class="chat_box_receiver_img"
src="/assets/img/dummy1.png"
alt=""
/>
</a>
<p class="chat_box_receiver_time">15:15</p>
</div>
<div class="chat_box_receiver_about_wrap">
<a href="#" class="chat_box_receiver_name">Wandy Buffet</a>
<p class="chat_box_receiver_text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam
quos nostrum exercitationem quas
</p>
</div>
</div>
<div class="chat_box_sender_wrap">
<div class="chat_box_sender_about_wrap">
<a href="#" class="chat_box_sender_name">Wandy Buffet</a>
<p class="chat_box_sender_text">
Commodi modi cumque voluptatem asperiores magnam reprehenderit.
</p>
</div>
<div class="chat_box_sender_about">
<a href="#">
<img
class="chat_box_sender_img"
src="/assets/img/dummy1.png"
alt=""
/>
</a>
<p class="chat_box_sender_time">15:15</p>
</div>
</div>
<div class="chat_box_receiver_wrap">
<div class="chat_box_receiver_about">
<a href="#">
<img
class="chat_box_receiver_img"
src="/assets/img/dummy1.png"
alt=""
/>
</a>
<p class="chat_box_receiver_time">15:15</p>
</div>
<div class="chat_box_receiver_about_wrap">
<a href="#" class="chat_box_receiver_name">Wandy Buffet</a>
<p class="chat_box_receiver_text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam
quos nostrum exercitationem quas
</p>
</div>
</div>
<div class="chat_box_sender_wrap">
<div class="chat_box_sender_about_wrap">
<a href="#" class="chat_box_sender_name">Wandy Buffet</a>
<p class="chat_box_sender_text">
Commodi modi cumque voluptatem asperiores magnam reprehenderit.
</p>
</div>
<div class="chat_box_sender_about">
<a href="#">
<img
class="chat_box_sender_img"
src="/assets/img/dummy1.png"
alt=""
/>
</a>
<p class="chat_box_sender_time">15:15</p>
</div>
</div>
</div>
<div class="chat_box_footer">
<form action="">
<div class="upload upload">
<div class="upload__wrap">
<input
class="upload__input"
type="file"
name="upload[]"
multiple="multiple"
data-max-count="3"
=""
accept="image/*"
/>
<div class="upload__btn"></div>
</div>
<div class="upload__mess">
<p class="count_img hidden_ms">
max img limit 18<strong class="count_img_var">8</strong>
</p>
<p class="size_img hidden_ms">
max img size:<strong class="size_img_var">5 Mb</strong>
</p>
<p class="file_types hidden_ms">
Permitted file formats:<strong class="file_types_var"
>jpg, png</strong
>
</p>
</div>
</div>
<input
placeholder="Write something..."
type="text"
id="emojionearea${count}"
class="chat_box_footer_input"
/>
<button class="chat_box_send_button">
<svg
width="26"
height="26"
viewBox="0 0 26 26"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.480926 9.77471C0.199649 9.88719 0.0113021 10.1551 0.000485742 10.4578C-0.0102799 10.7606 0.158669 11.0411 0.431212 11.1733L9.39647 15.5213L24.9181 0L0.480926 9.77471Z"
fill="#24904A"
/>
<path
d="M10.479 16.6025L14.8271 25.5678C14.9553 25.8322 15.2231 25.999 15.5153 25.999C15.5244 25.999 15.5334 25.9989 15.5426 25.9985C15.8454 25.9877 16.1132 25.7994 16.2258 25.5181L26.0006 1.08105L10.479 16.6025Z"
fill="#24904A"
/>
</svg>
</button>
</form>
</div>
</div>
`);
例如，这是我的 javascript 代码：
$("#chat_box_close_btn").click(function () {
alert("deleted");
$("#duplicater").remove();
});
$("#chat_box_close_btn2").click(function () {
alert("deleted2");
$("#duplicater2").remove();
});
$("#chat_box_close_btn2").click(function () {
alert("deleted3");
$("#duplicater3").remove();
});
$("#duplicater").click(function () {
alert("TEST i am 1")
})
$("#duplicater2").click(function () {
alert("TEST i am 2")
})
$("#duplicater3").click(function () {
alert("TEST i am 3")
})
解决方案
推荐阅读
- javascript - 持久门无法读取未定义的属性“订阅”
- deep-learning - 在 PyTorch 的“MaxPool2D”中，是否根据“ceil_mode”添加填充？
- vb.net - 函数调用本身无法返回唯一值
- node.js - 我需要将用户输入作为获取请求的一部分提交给 unsplash 服务器
- typescript - 有什么方法可以优化在 VSTS 中生成代码覆盖率报告的时间吗？
- github - 为什么“发布”事件也会生成“推送”事件？
- r - readxl 如何误读 excel xlsx 文件以及如何修复它？
- php - 如何在 Slim 4 中注入多个 PDO 实例
- reactjs - 在 ReactJs 中动态删除部分表单时的焦点字段
- javascript - p5.js：当我的鼠标悬停在正在处理的草图中的不同元素上时，如何使文本出现？