点击事件不适用于动态创建的按钮答案

【问题标题】：click event is not working for dynamically created button点击事件不适用于动态创建的按钮
【发布时间】：2015-05-25 11:55:22
【问题描述】：

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

我想使用 javascript 或 jquery 手动触发“显示原始”按钮的单击事件，但不起作用，请参阅我尝试过的一些代码 sn-ps。

$("#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();
})

图片网址：http://1drv.ms/1KhfLbo

【问题讨论】：

标签： javascript jquery

【解决方案1】：

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

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

致trigger事件：

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

【讨论】：

那是超级快！ +1
@Tushar，恭喜你达到 5k :)
@AmmarCSE 谢谢老兄！

【解决方案2】：

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

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

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

使用

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

或

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

【讨论】：

【解决方案3】：

我得到了答案。实际上翻译栏在 iframe 标签内，所以我们需要选择 iframe（容器），然后选择其中的任何元素。

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

【讨论】：