将on :: click属性添加到动态创建的元素中

Question

我想动态创建一些div。用例如下：

1. 按下开始以下步骤的按钮
2. 创建一些div并将其放到已经存在的div元素的html中
3. 创建的div应该可单击，并在单击后启动一些操作。

如何分配给：：点击给他们？有可能吗？

Answer 1

[我使用document.createElement创建了动态元素，并使用onclick来设置click的回调。因为我在svelte脚本的范围内编写了此元素，所以它完全可以正常工作。

 let div=document.createElement('div');
 div.innerHTML=`Im child div no ${i}`    
 div.onclick=()=>clickOnDiv(`${i}`);
 document.querySelector("#mainDiv").appendChild(div);

在这里测试：https://svelte.dev/repl/5729595307084fe7b0eaf827bde8bb6b?version=3.20.1

<script>
    function createDivs(){
       for(let i=1;i<=5;i++){
             let div=document.createElement('div');
             div.innerHTML=`Im child div no ${i}`    
             div.onclick=()=>clickOnDiv(`${i}`);
             document.querySelector("#mainDiv").appendChild(div);
         }
  }
    function clickOnDiv(number){
        console.log(`Im child div ${number} and im clicked`)
    }
</script>

<button on:click={() => createDivs()}>
    Click here to add 5 child divs to main div
</button>
<br>
Open the console to see click events
<div id="mainDiv">
    Im main div 
</div>