使用區域本身上的按鈕刪除區域

Question

我在區域上添加了一個字體-awesome按鈕 - 爲了刪除區域;它看起來像這樣：

這裏是我加入到渲染功能在wavesurfer.regions.js代碼：

var deleteButton = regionEl.appendChild(document.createElement('i')); 
 
deleteButton.className = 'fa fa-trash'; 
 
deleteButton.onclick = "wavesurfer.clearRegions();"; 
 
deleteButton.title = "Delete region"; 
 

 
    var css = { 
 
\t display: 'block', 
 
\t float: 'right', 
 
\t padding: '3px', 
 
\t position: 'relative', 
 
\t zIndex: 10, 
 
\t cursor: 'pointer', 
 
\t cursor: 'hand', 
 
\t color: '#129fdd' 
 
    }; 
 
    this.style(deleteButton, css);

當我看着呈現的HTML ，它不包含onclick事件;顯然，點擊它什麼都不做。 如何讓onclick事件首先顯示在呈現的HTML中？ 第二什麼propery方式得到clearRegions方法執行？

這裏呈現的HTML的文檔片斷：

<region class="wavesurfer-region" title="0:53-1:18" data-id="wavesurfer_cvb9j0n784o" style="position: absolute; z-index: 2; height: 100%; top: 0px; left: 543px; width: 255px; background-color: rgba(0, 0, 0, 0.0980392); cursor: move;"><i class="fa fa-trash" title="Delete region" style="display: block; float: right; padding: 3px; position: relative; z-index: 10; cursor: pointer; color: rgb(18, 159, 221);"></i><handle class="wavesurfer-handle wavesurfer-handle-start" style="cursor: col-resize; position: absolute; left: 0px; top: 0px; width: 1%; max-width: 4px; height: 100%;"></handle><handle class="wavesurfer-handle wavesurfer-handle-end" style="cursor: col-resize; position: absolute; left: 100%; top: 0px; width: 1%; max-width: 4px; height: 100%;"></handle></region>

TKX

Answer 1

deleteButton.onclick = function(){}; 

你的語法是錯誤的哥們。你不需要把報價。 如果還有其他問題，請分享您的完整代碼，以幫助解決問題。