Javascript EventListener使用随机唯一ID动态创建内容

我有动态创建的modals和随机id，非常好用

但是我需要在span标记中添加一个eventlistener，这样我就可以关闭具有被单击span标记的模式

我用这个代码在一个span标签上工作

$('div[id^="myModal_"] span').on('click', function() {
    $(this).parent().parent().parent().parent().hide();
})

但是当我点击另一个跨度时，我的两个模态都关闭了，因为它在DOM层次结构中处于较高的位置，并且没有四个父元素

我的整个代码是这样的，有人对如何添加EventListener来监听当前模式上span标记的点击并关闭该模式有什么建议吗

function new_modal(head, content){

var random = Math.floor(1000 + Math.random() * 9000);

var modal_html = '<div id="myModal_'+ random +'">' +
 '<div id="outer">' +
  '<div id="inner">' +
   '<div id="top">'+head+'</div>' +
    '<span><img class="btnClose" src="#"></span>' +
   '<div class="modalCnt">'+content+'</div>' +
    '<div class="btn">' +
     '<span class="btnText">OK</span>' +
    '</div>' +
  '</div> <!-- Inner -->' +
 '</div> <!-- Outer -->' +
'</div>';

$('body').append(modal_html);

    return 'myModal_' + random;  
}

$( document ).ready(function() {

    modal1 = new_modal("<h3>Headline 1</h3>", "<p>Content 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non metus libero. Integer sollicitudin felis vel lobortis sagittis. Vestibulum eget sapien est. Curabitur ex nibh, tincidunt id est ut, venenatis congue nisi.</p>");
    $('#' + modal1).show();
    modal2 = new_modal("<h3>Headline 2</h3>", "<p>Content 2 </p>");
    $('#' + modal2).show();
});

功能新模式（标题、内容）{
var random=数学地板（1000+数学随机（）*9000）；
var modal_html=''+
'' +
'' +
''头+''号+
'' +
''+内容+''+
'' +
“好的”+
'' +
' ' +
' ' +
'';
$（'body'）.append（modal_html）；
返回'myModal_u2;'+随机；
}
$（文档）.ready（函数（）{
modal1=新的模式（“标题1”，“内容1”Lorem ipsum door sit amet，Concertetur adivising elit.Suspendisse non metus libero.Integer sollicitudin felis vel lobortis sagittis.est.Curabitur ex nibh，Tincidut，venenatis congue nisi.
”；
$（'#'+modal1.show（）；
modal2=新的模式（“标题2”，“内容2
”）；
$（'#'+modal2.show（）；
});

使用方法而不是对多个

父对象（）

并更改以下选择器：

$('#myModal_'+ random +'" span').on('click', function() {
    $(this).closest('#myModal_'+ random).hide();
})

实际上，您的选择器不起作用，因为它会选择具有特定属性的所有元素，其值以特定字符串开头。

请使用方法，而不是使用多个

父项（）

，并将选择器更改为以下内容：

$('#myModal_'+ random +'" span').on('click', function() {
    $(this).closest('#myModal_'+ random).hide();
})

---

实际上，选择器不起作用，因为它选择了所有具有特定属性的元素，以特定字符串开头的值。

是否要通过在每个模式上单击

两个span

来关闭模式？是的，这完全正确。是否要通过在每个模式上单击

两个span

来关闭模式？是的，这完全正确。很好，需要删除额外的“in random+”。但除此之外，它就像我想要的那样工作。选择器真的让我很反感，这是我第一次使用唯一ID。很高兴能帮助你很棒，需要删除额外的“in random+”。但除此之外，它就像我想要的那样工作。选择器真的让我很反感，这是我第一次使用独特的ID。很高兴能帮助你