addEventListener в innerHTML - PullRequest
Новая
       11

addEventListener в innerHTML

3 голосов
/ 01 августа 2020

Я новичок в Javascript, и я пытаюсь добавить прослушиватель событий для каждой кнопки на каждой карточке, но код делает последнюю карточку (кнопку) только с событием «щелчок», так что есть ли способ сделать это происходит с внутренней картой HTML, это код: 

let tracksRender = (track) => {

track.forEach(element => {

    //this the card that will add the button for
    let card = `<div class="card">
    <div class="image">
        <img class="image_img" src="${element.artwork_url || 'http://lorempixel.com/100/100/abstract/'}">
    </div >
        <div class="content">
            <div class="header">
                <a href="${element.permalink_url}" target="_blank">${element.title}</a>
            </div>
        </div>
</div >`;
    
    //here i add the card to DOM
    let searchResults = document.querySelector('.js-search-results');
    searchResults.innerHTML += card;

    // store the content of the button 
    let inBtn = `<i class="add icon"></i>
    <span>Add to playlist</span>`;
 
    // created button container 
    let btn = document.createElement("div");
    btn.classList.add("ui", "bottom", "attached", "button", "js-button");

    // added the content of the button 
    btn.innerHTML += inBtn;
    
    // here i add the the event Listener to the button 
    btn.addEventListener('click', () => {
        console.log("click");
    });

    //here i add the button to the last card have been created
    searchResults.querySelector(".card:last-child").append(btn);
    
});
}

и структура: 

<!doctype html>
<html>

<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>SoundCloud Player</title>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css'>
    <link rel='stylesheet' href='styles/main.css'>
    <style></style>
</head>

<body id="soundcloud-player">

    <div class="ui container col">
        <div class="col">
            <div class="main">
                <div class="js-search-results search-results ui cards">

                </div>
            </div>
        </div>
    </div>
    <script src="https://connect.soundcloud.com/sdk/sdk-3.3.2.js"></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js'></script>
    <script src="javascript/main.js"></script>
</body>

</html>

Fiddle: https://jsfiddle.net/y73bstju/7/

но он добавит событие только к последней карте

Ответы [ 3 ]

1 голос
/ 02 августа 2020

Я согласен с вами, что теоретически объект должен иметь событие, но мы наблюдаем такое поведение, что всякий раз, когда в соответствующем разделе DOM происходит следующая запись, обработчик события теряется, что является причиной того, что последний элемент имеет событие щелчка. Итак, давайте сначала напишем в DOM, и только когда мы закончим с этим, мы должны добавить прослушиватели событий, например: 

let SoundCloudAPI = {};
SoundCloudAPI.init = () => {
    SC.initialize({ client_id: 'cd9be64eeb32d1741c17cb39e41d254d' });
};
SoundCloudAPI.init();


SoundCloudAPI.getTrack = (inputVlue) => {
    SC.get('/tracks', {
        q: inputVlue
    }).then((tracks) => {
            console.log(tracks);
        SoundCloudAPI.renderTracks(tracks);
    });
}
SoundCloudAPI.getTrack("alan walker");

SoundCloudAPI.renderTracks = (track) => {

        track.forEach(element => {

    //this the card that will add the button for
    let card = `<div class="card">
    <div class="image">
        <img class="image_img" src="${element.artwork_url || 'http://lorempixel.com/100/100/abstract/'}">
    </div >
        <div class="content">
            <div class="header">
                <a href="${element.permalink_url}" target="_blank">${element.title}</a>
            </div>
        </div>
</div >`;
    
    //here i add the card to DOM
    let searchResults = document.querySelector('.js-search-results');
    searchResults.innerHTML += card;

    // store the content of the button 
    let inBtn = `<i class="add icon"></i>
    <span>Add to playlist</span>`;
 
    // created button container 
    let btn = document.createElement("div");
    btn.classList.add("ui", "bottom", "attached", "button", "js-button", "fresh");

    // added the content of the button 
    btn.innerHTML += inBtn;
    

    //here i add the button to the last card have been created
    searchResults.querySelector(".card:last-child").append(btn);
    });
    for (let btn of document.querySelectorAll('.ui.attached.button.js-button.fresh')) {
        // here i add the the event Listener to the button 
        btn.addEventListener('click', () => {
            console.log("click");
        });
    }
}

Fiddle: https://jsfiddle.net/r84um9pt/

0 голосов
/ 01 августа 2020

Добро пожаловать в сообщество. В вашем коде вы добавляете много классов к кнопке. Вы можете добавить прослушиватель событий к любому уникальному имени класса, которое специально применяется только к элементу кнопки.

Вы можете заменить: 

btn.addEventListener('click', () => {
    console.log('click');
});

на: 

document.querySelectorAll('.js-button').forEach(el=>{
  el.addEventListener('click', (event) => {
  event.preventDefault();
  console.log("click");
 });
});

Также было бы хорошо, если бы вы добавили eventListener из l oop, в который вы добавляете элементы.

0 голосов
/ 01 августа 2020

Может помочь создание элементов вместо добавления внутреннего HTML: 

let tracksRender = (track) => {
    
  // Select the results here, so you wont have to repeat it
  const searchResults = document.querySelector('.js-search-results');

  track.forEach(element => {

    // Create the card, give it its class and innerHTML
    const card = document.createElement('div');
    card.className = 'card';
    card.innerHTML = `<div class="image">
                          <img class="image_img" src="${element.artwork_url || 'http://lorempixel.com/100/100/abstract/'}">
                      </div >
                      <div class="content">
                          <div class="header">
                              <a href="${element.permalink_url}" target="_blank">${element.title}</a>
                          </div>
                     </div>`;
 
    // Created the button, give its classes and innerHTML
    const btn = document.createElement('div');
    btn.className = 'ui bottom attached button js-button';
    btn.innerHTML = '<i class="add icon"></i><span>Add to playlist</span>';
    
    // Add the event listener
    btn.addEventListener('click', () => {
        console.log('click');
    });

    // Append the button to the created card
    card.appendChild(btn);

    // Add the card to the results
    searchResults.appendChild(card);
    
  });

}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...