Javascript 出现 aria-hidden 弹出窗口的问题

Question

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

这是该代码的一部分：

 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>`;

这是代码的output：

我说的隐藏的咏叹调就是这个

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

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

代码测试

我创建了一个更改aria-hidden => true or 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 中添加了这个 function onClick="reply_click()"但什么也没发生。 我只收到alert('this function is called')

请给我一个想法好吗？

Answer 1

这可能是你的问题吗？ 您使用 javascript 动态创建项目，但您想要 select 的项目，单击事件，当时并未实际创建。 创建要导出的项目后，您可以对其进行 select 并进行所需的更改。

更新：我添加了我的意思的片段。 为了让我在点击按钮后出现 select 的 H1 标签，我必须写一个 function 在它发生后会出现。

 const button = document.querySelector(".clickme"); const container = document.querySelector(".container"); button.addEventListener("click", () => { container.innerHTML += ` <h1 class = "change-modal"> ı cant select this</h1> <div class="modal fade" id="public-event" tabindex="-1" role="dialog" aria-labelledby="public-event" aria-hidden="true"> ` }) const changeModal = document.querySelector(".change-modal") console.log(changeModal)

 <button class="clickme">Click me</button> <div class="container" style="background-color: red;"> </div> <h1 class="change-modal">ı select this</h1>

更新2：

for (let i = 0; i < data.length; i++) {

      html += // your html

      $("eventCard").append(html);

    //after this, you can select the item and type the function because the items are created here.      

    }

更新 3:.. : 我解释了如何在不使用 jquery 的情况下使用 javascript 做事。 希望你明白我的意思。

async getData() { // fetch operations using javascript
        const data = await fetch(url); // your api url
        const jsonToData = await data.json(); // here you can Request api and obtain the data
        return jsonToData;
    }

    getData().then((data) => {
        console.log(data) // ıts probably an array. 
        for (let data = 0; data < jsonToData.length; data++) {
            // data operations, what if you want to 
            html += // you printed document items,
        }
    })
    .then(() => {
        //!!! IMPORTANT!!!  this is where you need to perform the operation of selecting the element function.    you can also write a function that can work for the code here, but I've written it one by one for now.
       const clickedElement =  //type whatever element you want to click on. !!
        clickedElement.addEventListener("click", function() {
            const elementToChange = document.getElementById(".public-event");
            elementToChange.setAttribute('aria-hidden', 'false');
        })
    })
    .catch(err => console.log(err))

Answer 2

通过查看您在评论部分的问题和讨论，我认为您正在尝试在动态生成的 div 部分（html 部分）上添加点击事件并打开弹出模式。 我们可以通过在 jquery 中使用 $('#id' OR '.class').modal('show') 来实现。 So why don't you add a class any where inside your div section of html and bind a click function using jquery. 假设您在 card-header 之后的第一个 div 上添加了一个 class 名称 showModal，例如 div="card-header showModal"

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

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