javascript - 如何从innerHTML调用方法？

Question

我的问题与这两种方法有关。 DisplayBookmark() 和deleteBookmark()。显示书签有一个 url。当我按下删除按钮时，我需要获取该 url，并将其放入 deleteBookmark() 方法中。我需要修改这一行: <a class="button button__delete">Delete</a> Codepen example

[类似示例]第 88 行 ( https://github.com/bradtraversy/bookmarker/blob/master/js/main.js )，但使用 ES5 语法

我的想法:

• 我无法将 url 创建为类属性，因为它与书签数组绑定(bind)
• 我尝试使用 ${onclick = this.deleteBookmark(url)}但是现在只要我激活 displayBookmark() 就会启动它。仅当我单击删除时才需要它。
• 我无法选择 button__delete，因为它并不立即存在。

提前致谢

HTML

  <div class="wrapper">
        <form id="bookmarkFormID" class="bookmarkForm">
            <h3 class="bookmarkForm__title">Bookmark your Favourite Sites</h3>
            <p class="bookmarkForm__p">Website Name</p>
            <input id="siteName" type="text" placeholder="Website Name">
            <p class="bookmarkForm__p">Website URL</p>
            <input id="siteURL" type="text"  placeholder="Website URL">
            <input class="submitButton" type="submit" value="Submit">
        </form>
    </div>
    <div class="wrapper">
        <div class="bookmarkResults">  
        </div>
    </div> 

Javascript

class Bookmark {
    constructor(){
        // Properties
        this.siteName               = document.getElementById('siteName');
        this.siteURL                = document.getElementById('siteURL');
        this.bookmarkForm           = document.getElementById('bookmarkFormID');
        this.bookmarksResults       = document.querySelector('.bookmarkResults');

        // Methods
        this.bookmarkForm.addEventListener('submit', event => this.saveBookmarks(event))

        this.validateForm;
        this.displayBookmark;

        this.events();

    }
    events(){
    this.displayBookmark();
    }
    // Save bookmark data and implements local storage
    saveBookmarks(event){

       //  Implements Local Storage
        let bookmarkObject = {
            siteName: siteName.value,
            siteUrl:  siteURL.value
        }

        if(localStorage.getItem("bookmarks") === null){
            let bookmarks = [];
            bookmarks.push(bookmarkObject)
            localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
        }else{
            let bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
            bookmarks.push(bookmarkObject);
            localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
        }
        // Resets form
        this.bookmarkForm.reset();

        this.displayBookmark();
        event.preventDefault();
    }
    // Display bookmark on DOM
    displayBookmark(){
       let bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
        // If local storage is empty.
        if(bookmarks == null){
            return false;
        }else{
            this.bookmarksResults.innerHTML = ``;
            for (let index = 0; index < bookmarks.length; index++) {
            let name = (bookmarks[index].siteName).charAt(0).toUpperCase() + bookmarks[index].siteName.slice(1);
            let url = bookmarks[index].siteUrl;
            console.log("url is " + url);
            this.bookmarksResults.innerHTML += 
            `
            <ul>
                <li><h2 ><a class="bookmarkResults__title" href="${url}" target="_blank">${name}</a></h2>
                <a class="button button__delete">Delete</a>
                <a class="button button__edit">Edit</a>
                <a class="button button__visit" href="${url}" target="_blank">Visit</a>
                </li>
            </ul>   
            `
            }  
        }
    }
    deleteBookmark(url){    
        let bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
        for (let index = 0; index < bookmarks.length; index++) {
            if(bookmarks[index].siteUrl == url){
                console.log("is it working?");
                bookmarks.splice(index, 1); 
            } 
        }
        localStorage.setItem(bookmarks, JSON.stringify(bookmarks));
    }
}
const bookmark = new Bookmark;

Answer 1

我建议你为你的 ul 动态创建 DOM ，而不仅仅是使用innerHTML。通过 var list = document.createElement('ul'); 创建所有元素并附加 this.bookmarksResults.appendChild(list)之后，当您使用 js 创建按钮时: var deleteButton = document.createElement('a');您只需向其添加事件监听器即可。另外我建议您使用button而不是a :

var ul = document.createElement('ul');
var deleteButton = document.createElement('button');
deleteButton.addEventListener('click', function(bookmark) {
  // do something with bookmark here
}.bind(bookmarks[index]));
ul.appendChild(deleteButton);