Forum | Appery.io

I have a list service that creates html to a html component using an array of objects that I have content set to each one as div element. I use a list service to set database Ids to each content. How can I set a click event to each div so I can save the database id of the div that was clicked on and navigate to another page.

Example how my service and html is set
<!--
temp=[];
for(Loop){
/* I am trying to add click event for each div, that will save that id to storage and navigate to another page when clicked*/
temp.push({
content: "<div id='label'<p data.nameOfSomething</p<",
id: data.id
});

}
/* More Code */
--

Hi Adam,

1) For div tag, add an attribute to store a needed id. You can get this id in event handler: http://api.jquery.com/attr/
2) Check this reference on how to add an event please: http://api.jquery.com/on/

Could you give a small example using this? Im not sure where to add this code

Hello Adam,

Here's an example:
preApperyio("someElement")&#46;append(" text 1

");
Apperyio("someElement")&#46;append(" text 2

");
$("[data-id]")&#46;off()&#46;on("click", function(){alert("div with data-id = " + $(this)&#46;attr("data-id") + " was clicked");})/pre

Im not sure I know what you mean. I have an json type object thats name temp. In the service response I loop throw the responses adding each one to the the temp object. Then I send the temp object to my custom javascript and it does some magic to create some html. For a html component on the page. The way the temp=[] is set it only takes in strings in the content attribute. So I pass html in the form of strings through the content attribute. If your example can work with my temp=[] could you use it in a example some what like how I have created at the top. I am confused on how ur code can help me.

Hello Adam,

Please try this way:
precode
temp=[];
for(Loop){
/* I am trying to add click event for each div, that will save that id to storage and navigate to another page when clicked*/
temp&#46;push({
content: "<div data-id='"+ data&#46;id +"'>/codecode<p>/code data.nameOfSomethingcode</p>/codecode<>/code",
id: data.id
});
}
/pre

• on the page load event place this code:
  precode
  $(document)&#46;off("click", "div[data-id]")&#46;on("click", "div[data-id]", function(){
  alert("div with data-id = " + $(this)&#46;attr("data-id") + " was clicked");
  });
  /code/pre

Thank you so much! Thats perfect!