加载div标签后添加函数答案

【问题标题】：adding a function after the div tag is loaded加载div标签后添加函数
【发布时间】：2014-02-23 20:49:57
【问题描述】：

如果我有一个 div 标签说

<div id="main" style="display:none"></div>

它的内容在用户点击按钮后显示。我有一张图片加载在"#main" div 标签内

<img src="a.png" id="tu" />

当用户点击图片时，必须完成一些功能这个函数必须在加载div标签后加载，所以我想到了这样做

$("#main").load(function() { 

    $('#tu').click(function() {
    alert("asd");
    });
});

但这不起作用。

【问题讨论】：

DIV 没有任何 onload 事件并且 onload 事件没有冒泡
^^ Wolff 说的，DIV 立即加载，没有加载事件。

标签： jquery html

【解决方案1】：

您应该使用最近的静态容器委托图像的点击事件。在没有看到相关代码的情况下，我敢打赌#main 是最接近的静态容器：

$('#main').on('click', '#tu', function(){
    alert("asd");
});

否则，您仍然可以将其委托给document 级别：

$(document).on('click', '#tu', function () {
    alert("asd");
});

使用委托，添加图片后无需设置，当#main在DOM中可用时设置（1）或使用document时随时设置（2）。

【讨论】：

【解决方案2】：

将<img src="a.png" id="#tu" /> 更改为<img src="a.png" id="tu" />

【讨论】：

抱歉打错了。

【解决方案3】：

如果文档加载完成时您的图像已经可用，那么您为什么不这样做：

$(function() {
    $('#tu').click(function() {
        alert("asd");
    });
});

如果您在 #main 可见时加载图像，则可以在该时间点附加处理程序，执行以下操作：

$(function() {
    $('#someButton').click(function() {
        $("#main").append('<img src="a.png" id="tu" />');
        $('#tu').click(function() {
            alert("asd");
        });

        $("#main").show();
    });
});

【讨论】：