讓JavaScript等待元素在頁面上呈現，然后將JS物件系結到它

我正在從事某種專案，它需要動態前端元素，但我沒有時間學習 React 或其他東西。因此，我決定撰寫一些小邏輯，這意味著我向 DOM 添加了一些元素，然后將一些 JS 物件系結到它代表它的邏輯并提供它的方法。您可以在下面看到解釋我的問題的示例。

`

function itemHTML(name,price){
  return  `
    <div >
      <span >${name}</span>
      <span >${price}$</span>
      <button >X</button> 
    </div>
  `
}

class ContainerObj {
  constructor (self){
    this.self = self
    this.items = []
  }
  add(item) {
    this.self.innerHTML  = itemHTML(item.name,item.price)
    this.items.push(
      new ItemObj(
        self = this.self.querySelector(".item:last-child")
      )
    )
  }
}

class ItemObj {
  constructor(self){
    this.self = self 
    this._name = self.querySelector(".item__name")
    this._price = self.querySelector(".item__price")
    this._deleteButton = self.querySelector(".item__delete-button")
    this._deleteButton.addEventListener("click",(event)=>{
      this.self.remove()
    })
  }
  get name() {
    return this._name
  }
  get price() {
    return this._price
  }
  set name(value) {
      this._name = value
  }
  set price(value) {
      this._price = value
  }
}

class AppenderObj {
  constructor (self,container) {
    this.self = self
    this.container = container 
    this._name = self.querySelector(".appender__name")
    this._price = self.querySelector(".appender__price")
    this._addButton = self.querySelector(".appender__add-button")
    this._addButton.addEventListener("click",(event)=>{
        this.container.add({
          name:this._name.value,
          price:this._price.value
        })
        this._name.value = ""
        this._price.value = ""
    })
  }
}

items = [
  {
    name: "Apple",
    price: 5
  },
  {
    name: "Pen",
    price: 20
  }
];

$container = new ContainerObj(
  self = document.querySelector("#container")
)

$appender = new AppenderObj(
  self = document.querySelector("#appender"),
  container = $container
)


items.forEach((item)=>{
  $container.add(item)
})

#container{
  border:1px solid black;
}
#appender{
  margin-top: 10px;
}
.item{
  display: flex;
  justify-content: space-between;
  border: 1px solid black;
  margin: 5px;
  padding: 5px;
}

<div id="container">    </div>
<div id="appender">
    <input class="appender__name" type="text" placeholder="Name">
    <input class="appender__price" type="text" placeholder="Price">
    <input class="appender__add-button" type="button" value="add">
</div>

`

我不明白為什么它真正添加但不能

感謝您的建議... 盡量少寫 :) 如果有關問題的資訊不足，我將發送其余部分。

uj5u.com熱心網友回復：

問題在于您this.self.innerHTML = itemHTML(item.name,item.price)在ContainerObj類中所做的 HTML 的串聯。如果你insertAdjactentHTML改用，像這樣：

this.self.insertAdjacentHTML('beforeend', itemHTML( item.name, item.price ) );

事件偵聽器將正常運行。

function itemHTML(name,price){
  return  `
    <div >
      <span >${name}</span>
      <span >${price}$</span>
      <button >X</button> 
    </div>
  `;
};

class ContainerObj {
  constructor(n){
    this.self=n;
    this.items=[];
  }
  
  add(item) {
    /* do not concatenate the HTML, insert new like this */
    this.self.insertAdjacentHTML('beforeend', itemHTML( item.name, item.price ) );
    this.items.push(
      new ItemObj( this.self.querySelector(".item:last-child") )
    )
  }
};

class ItemObj {
  constructor(n){
    this._name = n.querySelector(".item__name");
    this._price = n.querySelector(".item__price");
    this._deleteButton = n.querySelector(".item__delete-button");
    
    this._deleteButton.addEventListener("click",(event)=>{
      n.remove();
    })
  }
  get name() {
    return this._name;
  }
  get price() {
    return this._price;
  }
  set name(value) {
      this._name = value;
  }
  set price(value) {
      this._price = value;
  }
};

class AppenderObj {
  constructor (n,container) {
    this.container = container;
    this._name = n.querySelector(".appender__name");
    this._price = n.querySelector(".appender__price");
    this._addButton = n.querySelector(".appender__add-button");
    
    this._addButton.addEventListener("click",(event)=>{
        this.container.add({
          name:this._name.value,
          price:this._price.value
        })
        
        this._name.value = "";
        this._price.value = "";
    });
  }
};


$container = new ContainerObj(
  document.querySelector("#container")
);
$appender = new AppenderObj(
  document.querySelector("#appender"),$container
);



const items = [
  {
    name: "Apple",
    price: 5
  },
  {
    name: "Pen",
    price: 20
  }
];

items.forEach(item=>{
  $container.add(item)
});

#container{
  border:1px solid black;
}
#appender{
  margin-top: 10px;
}
.item{
  display: flex;
  justify-content: space-between;
  border: 1px solid black;
  margin: 5px;
  padding: 5px;
}

<div id="container"></div>
<div id="appender">
    <input class="appender__name" type="text" placeholder="Name" />
    <input class="appender__price" type="text" placeholder="Price" />
    <input class="appender__add-button" type="button" value="add" />
</div>

標籤：javascript html dom dom事件

上一篇：如何使用javascript訪問html表中每行的第二個單元格？

下一篇：當<tbody>為空時，.insertRow()無法正常作業