Saya mencoba menambahkan elemen div secara dinamis di dalam elemen div filtersSpace dan pada saat yang sama menambahkan eventListener untuk setiap tombol di dalam elemen div tetapi ketika saya memasukkan elemen kedua, elemen pertama yang ditambahkan tidak berfungsi.

Adakah yang bisa membantu saya?

case "status":
        filtersSpace.innerHTML +=
            `<div class="card border-dark mx-2 my-3" style="width: 23%;">
                <h5 class="card-header">Status</h5>
                <div class="card-body">
                    <tr>
                        <select class="custom-select mr-sm-2" id="${'statusInput' + statusFilterCounter.toString(10)}">
                            <option selected value="Solved">Solved</option>
                            <option value="Open">Open</option>
                            <option value="Pending">Pending</option>
                        </select>
                    </tr>
                    <tr>
                        <button type="button" class="btn btn-dark my-2" style="width: 100%;"
                        id="${'statusActionButton' + statusFilterCounter.toString(10)}">
                            Filter
                        </button>
                        <button type="button" class="btn btn-outline-dark my-2" style="width: 100%;"
                        id="${'statusCancelButton' + statusFilterCounter.toString(10)}">
                            Cancel
                        </button>
                    </tr>
                </div>
            </div>`;
        defineFilter(
            "status",
            document.getElementById("statusInput" + statusFilterCounter.toString(10)),
            document.getElementById("statusActionButton" + statusFilterCounter.toString(10)),
            document.getElementById("statusCancelButton" + statusFilterCounter.toString(10))
        );
        statusFilterCounter += 1;
        statusLink.disabled = true;
        break;

...

function defineFilter(filterType, input, actionButton, cancelButton) {
actionButton.addEventListener("click",
    function () {
        filters.push({filterType : filterType, value : input.value});
        actionButton.disabled = true;
        print();
        getDataFromJSon();
    }
);
cancelButton.addEventListener("click",
    function () {
        var quantity = this.id.charAt(this.id.length - 1);
        var counter = 0;
        for (var i = 0; i < filters.length; i++){
            if(filters[i].filterType == filterType){
                console.log(">>>");
                if(counter == quantity){
                    filters.splice(i, 1);
                    print();
                    getDataFromJSon();
                    break;
                }
                counter += 1;
            }
        }
        actionButton.disabled = false;
    }
);}
0
Fahico98 27 Mei 2019, 18:18

2 jawaban

Jawaban Terbaik

Gunakan delegasi event untuk elemen yang ditambahkan secara dinamis.

Lihat di bawah bagaimana kami menggunakan e.target.matches([CSS Selector]) untuk memutuskan apa yang harus dilakukan.

const newAdd = () => {
  const div = document.createElement('div');
  div.innerHTML = `<button class='btn'>Click Me</button>`;
  document.querySelector('.container').appendChild(div);
}

document.addEventListener('click', (e) => {
  if(e.target.matches('.btn')) {
    console.log('I was clicked !!!');
  }
  
  if(e.target.matches('#add')) {
    newAdd();
  }
});
<div class="container"></div>
<button id="add">Add</button>
1
Bibberty 27 Mei 2019, 15:51

Anda harus mendaftar untuk elemen baru pendengar acara

0
jibeeeee 27 Mei 2019, 15:20