Question

jquery 初始化html元素

// 下面这个是button
// <button class="but" data-icon="icon-search">Submit</button>
// <button class="but" data-icon="icon-search">Submit</button>
// 我最终想把button初始化成下面这样
// <button class="but"><i class="icon-search"></i> Submit</button>
// 初始化 class="but" 的所有 button
// 用 .on() 是因为我需要对未来动态添加的元素也能自动适用
// 但是这样程序没有执行, 要实现这个功能, 有没有更好的办法
// 如果我把 .on('load') 换成 .on('click') 鼠标点击就能触发
// 但是一定不能用click来手动触发, 要页面或者未来元素载入以后能自动适用
// 不知道为什么 load 事件就不会触发,

$(document).on('load', '.but', function(){
var $this = $(this);
var icon = $this.data("icon");
// 如果这个button包含 [data-icon=""] 这个属性, 则为这个button添加一个图标
if(icon != "undefined" && icon != null && icon != "") {
var value = $this.html();
$this.data("icon","") // 删除icon属性
.html('<i class="' + icon + '"></i> '+ value); // 把对应的icon写入到button
}
});
我要动态载入的html就是
<button class="but" data-icon="icon-search">Submit</button>
这样的, 然后会自动初始化为这个
<button class="but"><i class="icon-search"></i> Submit</button>

Answer 1

load事件只会发生在以下指定的几种标签或对象中：
APPLET, BODY, EMBED, FRAME, FRAMESET, IFRAME, IMG, LINK, SCRIPT, window
而且也只会发生在首次加载的时候，动态添加的是不会触发这个事件的。
何不换一种思路，就是在动态载入html的同时就把代码改了呢？