Javascript更改背景颜色与功能和列表项的CSS

Question

i have a function with the following segment as seen below and what i want to do is to modify the background color of a list item when people click the edit button that is inside the list. Somehow i don't get is to work. So the idea is to use the unique id for each list item of the group and use that one as an unique id in the second function, what am i doing wrong.

function datafromJSON(id_program) {
$.ajax({
    url: "/xxxxxx",
    type: "GET",
    success: function (data) {

        $.each(data, function (i, item) {

     var li = '<li id='ihaveaname ' + dataidfromdb + '" style =background-color:transparent;" > '
           + ' < a href = "" id = "clickonme" > < span class = "icon-edit" < /span></a > '
           + ' < /li>';

         $('#clickonme').click(function () {
           $('#ihaveaname' + dataidfromdb  + '').css("background-color", "red");
         });

      });
   });
}

Answer 1

in general it's not good idea to create click handler on each anchor, instead you can use bubbling of events to parent, and you should add to achor class .edit-parent for filtering of edit events...

$('ul.parentofli').on('click', '.edit-parent', function(event) {
  $(event.target).closest('li').css('background-color', 'red');
});

Answer 2

Here is the answer i found, for the people that interest it. Since it is a list and the items get repeated the ID's get repeated as well and you're not allowed to use the same id twice. So by renaming the id to a unique name as well (in this case i added also the dataid to that one the function works perfect. Now i am able to use various css effects on the list elements or any other div therefor on the page.

function datafromJSON(id_program) {
$.ajax({
url: "/xxxxxx",
type: "GET",
success: function (data) {

    $.each(data, function (i, item) {

 var li = '<li id='ihaveaname ' + dataidfromdb + '" style =background-color:transparent;" > '
       + ' < a href = "" id = "clickonme ' + dataidfromdb + '" > < span class = "icon-edit" < /span></a > '
       + ' < /li>';

     $('#clickonme' + dataidfromdb +').click(function () {
       $('#ihaveaname' + dataidfromdb  + '').css("background-color", "red");
     });

  });
 });
}