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