jQuery动态添加html元素后，响应事件的问题记录

var li =
    "
" +
    "" +
       // 缩略图 点击部分 index='" + i + "'
       "" +
         "" +
         "" +
       "" +
       // video信息部分， 修改名称 删除
       "" + video['name'] + "" +
       "" +
         "" + record +
         "" +
       "" +
    "" +
    "
";

$("#CameraUl").append(li);

公司主营业务：做网站、网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联公司推出清涧免费做网站回馈大家。

如上，动态添加html元素后，响应事件的添加方法：

$("#InnerMainId #CameraUl").unbind('click').on('click', 'li>a>span', function() {
    var type = $(this).attr('type');
    if (type == "play") {
        var index = $(this).attr('index');
        // TODO
    } else if (type == "edit") {// 修改
        // TODO
    } else {// 删除
        // TODO
    }
    event.stopImmediatePropagation();
});

 这样可以为li中的各个元素添加不同的属性。而如下的分各个元素的添加点击事件的做法，会发生覆盖，即只能响应最后一个事件：

$(document).unbind('click').on('click', '.CameraImg', function(event) {
    // TODO 
});

$(document).unbind('click').on('click', '.VideoName', function(event) {
    // TODO
});

$(document).unbind('click').on('click', '.DeleteVideo', function(event) {
    // TODO 
});

即只有类名为DeleteVideo的元素的点击事件 可以响应。

分享题目：jQuery动态添加html元素后，响应事件的问题记录
转载注明：http://cdxtjz.cn/article/jcjejd.html