如何將點擊事件添加到iframe的動態元素中？

Question

我通過使用innerHTML將一些html元素添加到iframe中，如下所示

var iframe = document.getElementById('composer_frame'), iframedoc = iframe.contentDocument || iframe.contentWindow.document;

iframedoc.body.innerHTML = "<a id='myAnch'>Click</a>";

並且我想編寫一個應通過單擊錨點“ #myAnch”將其刪除的函數

Answer 1

嘗試這個：

$("#composer_frame").contents().find("#myAnch").on('click',function(){
    //do stuff
});

Answer 2

您可以為這樣的元素編寫函數

$('#myAnch', iframedoc).click(function() {console.log("a");})

但是您應該將此代碼放在父html頁面上。

Answer 3

說明：-由於您試圖在iframe中動態創建的元素上添加事件，因此您必須通過父引用將其綁定。

這意味着基於父元素嘗試找出動態添加的元素，然后在其上添加事件。（因為jQuery無法直接識別動態添加的元素）

因此，如下所示：-

$("#composer_frame").contents().find('#myAnch').on("click", function (e) {
    e.preventDefault();
    alert('clicked');
});

工作片段：-https: //jsfiddle.net/sycf9nz6/

這稱為事件委托