带有 aria-hidden 弹出窗口的 Javascript 问题

Question

我有这个 ajax 代码，它从服务器获取 res.json(event)，然后根据收到的值创建一个对象。

部分代码如下:

 html += `<div class="card-header" id="headingOne-${i}">` +
`<div class="event-time"><time class="published" datetime="2017-03-24T18:18">${data[i].events.targetReminder} | ${data[i].events.targetAmPM}</time><div class="more">   <svg class="olymp-three-dots-icon"><use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>   </svg><ul class="more-dropdown"><li><a href="#" onClick="reply_click()" id ="mark-${i}">Mark as Completed</a></li>  <li><a href="#" id ="delet-${i}">Delete Event</a>   </li></ul></div></div>` +
`<h5 class="mb-0 title"><a href="" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" >${data[i].events.title}<i class="fa fa-angle-down" aria-hidden="true"></i>` +
`   <span class="event-status-icon" data-toggle="modal" data-target="#public-event"><svg class="olymp-calendar-icon" data-toggle="tooltip" data-placement="top" id ="uncomplet-${i}"data-original-title="UNCOMPLETED"><use xlink:href="svg-icons/sprites/icons.svg#olymp-calendar-icon"></use></svg></span></a></h5></div>` + 
`<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#headingOne-${i}"><div class="card-body" id="${data[i].events._id}" onClick="reply_click()">${data[i].events.caption}</div><div class="place inline-items"><svg class="olymp-add-a-place-icon"><use xlink:href="svg-icons/sprites/icons.svg#olymp-add-a-place-icon"></use></svg><span>${data[i].events.location}</span></div></div></div>`;

这是代码的输出:

我说的aria-hidden就是这个

<div class="modal fade" id="public-event" tabindex="-1" role="dialog" aria-labelledby="public-event" aria-hidden="true">

我已经尝试过并且已经知道这不是一个合适的解决方案是在这里

代码测试

我创建了一个脚本来更改 aria-hidden => true 或 false 但我不知道如何将它与我的盒子链接

<script type="text/javascript">
    function reply_click()
    {

        document.getElementById('public-event').setAttribute('aria-hidden', 'false');
    }
  </script>

另一个失败的尝试:

<script type="text/javascript">
    function reply_click()
    {
       alert('this function is called')
        $(`#mark-${i}`).onclick = function() {
            document.getElementById('public-event').setAttribute('aria-hidden', 'false');
        }; 

    }
  </script>

我还在 HTML 中添加了这个函数 onClick="reply_click()" 但没有任何反应。我只得到 alert('this function is called')

你能给我一个想法吗？

Answer 1

通过查看您在评论部分的问题和讨论，我认为您正在尝试在动态生成的 div 部分(html 部分)上添加点击事件并打开弹出模式。 我们可以通过在 jquery 中使用 $('#id' OR '.class').modal('show') 来实现。 那么，为什么不在 html 的 div 部分中的任何位置添加一个类，并使用 jquery 绑定(bind)点击功能。假设你在 card-header 之后的第一个 div 上添加了一个类名 showModal，比如 div="card-header showModal"

        $('#eventCard').on('click', '.showModal', function(){
                  $('#public-event').modal('show');
           });

我们不能直接使用 $('.showModal').click...... 因为在最初不存在的 #eventCard 之后附加 html 部分后，文档结构发生了变化。希望这行得通。