jquery dynamically adds HTML elements and responds to events with a problem record

var li =     "<li>"  +     "<a>"  +        //  thumbnails   Click Section  index= '  + i +  '          "<span class= ' cameraimg '  type= ' play '  index= '"  +  i +  ' > '  +          '   +          < span class= ' cameraplay ' ></span> '  +        ' </span> '  +       // video Information Section,  modify name   Delete          "<span class= ' camerainfo videoname '  type= ' edit '  video_id= '"  +  video[' video_id '] +  ' > '  + video[' name '] +  ' </span> '  +         "<span class= ' camerainfo '  type= ' delete ' >"  +           "<i class= ' IconView ' ></i>"  + record +           "<i class= ' deletevideo '  id= ' Delete_"  + i  +  "'  index= '"  + i +  "></i>"  +         "</span>"  +     "</a>"  +     "</li > "; $ (" #CameraUl "). Append (LI);

As above, after adding HTML elements dynamically, respond to events by adding methods:

$ ("#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") {//Modify//TODO} else {//delete//TODO} Event.stopimmediatepro Pagation ();});

This allows you to add different attributes for each element in the LI. Instead of adding a click event to each element below, an overlay occurs, which can only respond to the last event:

$ (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});

That is, only the click events of the element with the class name Deletevideo can respond.

This article is from the "Sheep" blog, please make sure to keep this source http://5934497.blog.51cto.com/5924497/1683655

jquery dynamically adds HTML elements and responds to events with a problem record