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://hbruida.cn/article/jcjejd.html