js---jQuery--动态增加html片段，会再次触发$(fn);函数

/**

*家庭成员列表
*/
$(function(){
();
});

var homeMemberList = (function(window, $, undefined){

//初始化
function init(){
initAddDialogContent();
}

function initAddDialogContent(){
var homeMemberAddHtml = null;
$.ajax({
url:'',
type:'get',
dataType:'text',
async:false,
success:function(data){
homeMemberAddHtml = data;
}
});
$('body').append(homeMemberAddHtml);//动态的添加html片段,会使jQuery再次调用$(fn); wjli add 20130512

();
}

//公共函数
_homeMember.init = init;
_homeMember.loadHomeMemberData = loadHomeMemberData;
return _homeMember;

})(window, jQuery);

问题：

$(fn); 即为：jQuery中$(document).ready()的简写方式，允许你绑定一个在DOM文档载入完成后执行的函数。

这样当在function initAddDialogContent(){}方法中动态载入html片段完成时，会再次调用$(fn); 这样dialog就载入了2次。最终导致无法获得dialog中输入的值。

因为每个输入口都有2份，id相同。所以要解决这个方法就必须解决dialog载入2次的问题。

$('body').append(homeMemberAddHtml);

和

('bodyLevel').innerHTML = homeMemberAddHtml; 原理一样，都有引起再次调用$(fn);

解决载入2次的方法：

var homeMemberList = (function(window, $, undefined){

var _homeMember = {};

var _inited = false;//是否已经初始化[true=是|false=否],防止动态加载html片段时，jQuery再次调用init

//初始化
function init(){
if(!_inited){
initAddDialogContent();
_inited = true;
}else{
return;
}
}

function initAddDialogContent(){
var homeMemberAddHtml = null;
$.ajax({
url:'',
type:'get',
dataType:'text',
async:false,
success:function(data){
homeMemberAddHtml = data;
}
});
$('body').append(homeMemberAddHtml);//动态的添加html片段,会使jQuery再次调用$(fn); wjli add 20130512

();
}

//公共函数
_homeMember.init = init;
_homeMember.loadHomeMemberData = loadHomeMemberData;
return _homeMember;

})(window, jQuery);

目前没有找到好的方法，只能这样解决了。

最后补补课，补充一下jQuery基础知识：

$(fn)

$(document).ready()的简写方式，允许你绑定一个在DOM文档载入完成后执行的函数。这个函数的作用如同$(document).ready()一样，只不过用这个函数时，需要把页面中所有其他的$()操作符都包装到其中来。从技术上来说，这个函数是可链接的－－但真正以这种方式链接的情况并不多。你可以在一个页面中使用任意多个$(document).ready事件。

要详细了解ready事件，见ready(Function)。

返回值:jQuery

参数:

• fn (Function): 当DOM载入完成后要执行的函数

 

 

示例:

当DOM就绪可用时，执行其中的函数。

jQuery 代码:

$(function(){ // DOM文档已经载入就绪 });