bugfix> javascript > 投稿

空のページのみを含むHTMLページがあります <div id="data"></div> そしてjavascriptでは、ajaxを介してデータベースから情報を取得し、それをjavascriptに戻してから、 <div id="data"></div>

データを列に設定しました。別の列を追加する場合、この列をクリックするとボタンが含まれ、行が削除されます。 (私はajaxを介して削除を行い、それを戻す方法などを知っています。)しかし問題は、どうすればボタンを実行できるかということです。

中に追加すると div = data 一度印刷されますが、JavaScriptファイル内に追加すると、クリックリスナーを追加できなくなります。どうすればよいですか。

       let printItems = document.getElementById("data");
  function succes(user) {
        let info = "<div class='infoTable'>";
        for (let i = 0; i < user.length; i++) {
            info += "<div class='info'>";
            info += "<div class='fcol'>" + (i+1) + "</div>";
            info += "<div class='scol'>" + user[i].name + "</div>"; 
            info += "<div class='tcol'>" + user[i].quantity + "</div>";
            info += "I NEED TO ADD THE BUTTON HERE TO HAVE user[i].ID";
            info += "</div>";
        }
        info += "</div>";
        printinfo.innerHTML = info;
    }

<div id="data"></div>

回答 2 件
  • さて、あなたは難しい部分をしました。あなたが探しているものは非常に簡単であり、あなたはそれを複数の方法で行うことができます。私はあなたに私にもっと簡単な方法を提案することができます。行を(UIとajaxから)削除する関数を記述します。ここでの問題は、行ごとにその関数を呼び出す方法です。だからあなたは添付することができます onclick 作成したすべての行の関数。 例えば:

    info += '<button onclick="deleteRowFunction"> Delete This<button />';
    
    

    これで、ボタンをクリックするたびに、削除関数が呼び出されます。しかし、どの関数が呼び出されるかを決定する方法は? これは、次の方法で解決できます。

    info += '<button onclick="deleteRowFunction(\'' + user[i].ID + '\')"> Delete This<button />';
    
    

    他の簡単な方法は使用することです data- 属性:

    例えば:

    info += '<button data-userId=' + user[i].ID + ' onclick="deleteRowFunction"> Delete This<button />';
    
    

    このようにして、 ID の中に deleteRowFunction 。あなたはここですべての詳細を読むことができます

  • const user = [{
      name: "ABC",
      quantity: 2,
    }, {
      name: "XYZ",
      quantity: 1,
    }, {
      name: "abcdef",
      quantity: 12,
    }];
    let printItems = document.getElementById("data");
    function deleteButton(e){
      const targetButton = e.target;
      targetButton.parentElement.parentElement.remove();
    }
    function succes(user) {
      let info = "<div class='infoTable'>";
      
      for (let i = 0; i < user.length; i++) {
        info += `<div class='info'>
                   <div class='fcol'>${(i + 1)}</div>
                   <div class='scol'>${user[i].name}</div>
                   <div class='tcol'>${user[i].quantity}</div>
                   <div class='tcol'><button onclick="deleteButton(event)">Delete</div>
                 </div>`;
      }
      
      info += "</div>";
      printItems.innerHTML = info;
    }
    succes(user);
    
    
    <div id="data"></div>
    
    

あなたの答え