Question

jquery为动态生成的元素绑定事件的问题

function fun() {
$("#btn2").hide();
var url = "tree.xml";
$.ajax({
url: url,
dataType: "xml",
error: function (xml) {
alert('Error loading XML document' + xml);
},
success: function (xml) {
$(xml).find("company > department").each(function (i) {
var d = document.createElement("div");
d.id = "div" + i;
d.innerHTML = $(this).attr("name");
var divContainer = document.createElement("div");
divContainer.id = "divContainer" + i;
$(this).find("person").each(function (j) {
var divin = document.createElement("div");
divin.id = "div" + i + j;
divin.innerHTML = "    " + $(this).text();
//下面这个事件绑定没有效果
$("#div" + i + j).on("click", function () {
alert("gg");
});
divContainer.appendChild(divin);

});
$("#div").append(d, divContainer);
$("#div" + i).next().hide();
$("#div"+i).on("click", function () {
$("#div" + i).next().toggle();
});
});
}
})
上面注释下的绑定事件好像有问题，绑定不了，这个函数是从xml文件加载数据生成一棵树的，不知道为什么不行，求解答
}

Answer 1

道理很简单，在你绑定事件的时候，那个div对象还没有添加到画面上，你通过：$("#div" + i + j) 是筛选不到任何对象的。所以你的事件肯定绑定不上，没什么作用了。只要把你绑定事件的语句修改成下面这样就好了：

//把绑定的地方修改成这样就可以了
$(divin).on("click", function () {
    alert("gg");
});

另外你的代码jQuery跟javascript混用,看的是眼花缭乱啊，我用jQuery把success的处理方法稍微改写了下：

$.ajax({
    url: url
    ,dataType: "xml"
    ,error: function (xml) {
      alert('Error loading XML document' + xml);
    }
    ,success: function (xml) { 
      $(xml).find("company > department").each(function (i) {
        var d = $("<div>").html($(this).attr("name"));
        
        var divContainer = $("<div>").hide();
        $(this).find("person").each(function (j) {
           var divin =  $("<div>").html($(this).text());
           divin.click(function(){
               alert("gggg");
           });  
           divContainer.append(divin);
        });
        $("#div").append(d,divContainer);
        
        d.click(function(){
           divContainer.toggle();
        });
      });
    }
});

 

Answer 2

//下面这个事件绑定没有效果

$("#div" + i + j).on("click", function () {
    alert("gg");
});
divContainer.appendChild(divin);

修改成

divContainer.appendChild(divin);
$("#div" + i + j).on("click", function () {
    alert("gg");
});

   ps.如果使用jQuery，那么DOM操作最好就使用jQuery提供的方法

比如这个

var divin = document.createElement("div");
divin.id = "div" + i + j;
divin.innerHTML = " " + $(this).text();

使用jquery

var $diviin = $('<div id="div'+(i+j)+'"> '+$(this).text()+'</div>');