click事件不适用于动态创建的按钮

Question

我正在使用谷歌翻译器创建动态翻译栏，它显示原始按钮（点击下面的图像链接）。

我想使用javascript或jquery手动触发“显示原始”按钮的click事件，但无法正常工作，请参阅我尝试的一些代码片段。

$("#myBtn").click(function(){
    $("#\\:1\\.restore").click();
    //or
    $("#\\:1\\.restore").on('click');
    //or
    $("#\\:1\\.restore").trigger('click',jQuery.Event( "click" ));
    //or
    document.getElementById(':1.restore').click();
})

imageURL： http : //1drv.ms/1KhfLbo

Answer 1

myBtn上的事件未触发，您的事件处理程序不起作用。 对于动态添加的元素，请使用event delegation 。

$(document).on('click', '#myBtn', function() {
    // Your Code Here
});

trigger事件：

$("#\\:1\\.restore").trigger('click');

Answer 2

您需要来自诸如document的容器的委托

$(document).on('click', '#\\:1\\.restore', function(){...}));

我想手动触发“显示原始图片”按钮的点击事件

采用

$('#\\:1\\.restore').trigger('click')

要么

$('#\\:1\\.restore').click();//with no parameters

Answer 3

我得到了答案。 实际上，翻译栏位于iframe标记内，因此我们需要选择iframe（容器），然后选择其中的任何元素。

$("#myBtn").click(function(){
    $('#\\:1\\.container').contents().find('#\\:1\\.restore').click(); 
});