如何在onclick事件中将“ this”设置为子元素

Question

EDIT 2 :

Actually, What I was trying to do is passing img properties to server-side, because google app script is javascript in server side. And passing data to server can only be as string. The solution I found is adding a usual img property with value an object containing everything I want (id, src, ... of my img. I JSON.stringified this value and BOOM ... Now I get every data I need.
Thank you for your help and sorry for the misunderstood.

EDIT :

Thanks to this thread

https://stackoverflow.com/a/9726264/1859295

I could finally find a solution to my question.

I used an .on() method on my ul list and now my "this" is pointing to my img element.

Original Post:

I have an empty ul. I append li with js. li's contain img with src, id, name attribute AND onclick event which fires a function with "this" as parameter. I need my "this" to be the img element within my li. Instead, I get my ul as "this"

my code is:

function createItemsList(items){ 
    $("#items").empty();

    for (var i = 0; i < items.length; i++) {
      $("#items").append('<li class="w3-display-container" 
     id="test"><img src="'+ items[i].url + '" id ="'+ items[i].id + 
     '" style="height:25px;" 
     onclick="google.script.run.addItem(this)"; return false; 
     class="w3-ripple"></li>');
          }
        };


        google.script.run
              .withSuccessHandler(createItemsList)
              .getItemsList();

Answer 1

There are better ways of creating elements with jQuery:

for (var i = 0; i < items.length; i++) {
  let img = $("<img/>", {
    src: items[i].url,
    id: items[i].id,
    css: { height: "25px" },
    click: function() { google.script.run.addItem(this); },
    "class": "w3-ripple"
  });
  let li = $("<li/>", {
     "class": "w3-display-container"
     html: img
  });
  $("#items").append(li);
}

The $("<tagname/>") facility accepts a second argument with properties for the new element. You can include handler functions with that. It's much neater than trying to juggle quote characters in pieced-together HTML via strings.

Answer 2

I would change the inside for as following

 var img = $('<img />').attr('src', items[i].url).attr('id', items[i].id);
    img.click(function() {
        google.script.run.addItem(this)
    })
    $("#items").append('<li class="w3-display-container" id="test">').append(img);

Basically to use click eventhandler from jquery so I think this will be img.