Question

我有动态创建的模态和随机ID，这非常有效。

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

我使用此代码在一个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();
});

但是当我点击另一个范围时，我的两个模态都关闭了，因为它在DOM层次结构中更高，并且没有四个父元素。

我的整个代码看起来像这样，任何人都有任何建议如何添加eventlistnener来监听当前模态的span标签上的点击并关闭该模态？

userroles

Answer 1

使用closest()方法代替许多parent()并更改以下选择器：

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

实际上你的选择器不起作用，因为[attribute^=value]选择具有特定属性的所有元素，其值以特定字符串开头。

eventListnener到具有随机唯一ID的动态创建内容

1 个答案: