jquery - Data binding in javascript -

I am trying to implement a simple notification system for a private project, but to tie events in the information I got stuck

The things that I get till now are created dynamically.

  / * Notification Reference * / Var Notifications = []; // Notification Item var Notification = Action (travelInfo) {this.el = $ ('# notifications_container'); This.id = Math.random (). ToString () Substring (7); This.travelInfo = travelInfo; This.read = false; }; Notification.protipip.en = function () {this.addOne (); This.render (); This.bindFunctions (); } / * Dynamically generated * / for (var i = 0; i <-10; i ++) {var notice = new notification (travelInfo); Notifications.push (notification); Notification.init (); }  

This object is required to render each notification independently to track and pair the events that are actually presented:

  / / Render the notification of Notification Notification. Protopp.render = function () {var source = $ ('# info-template'). Html (); Var template = handlabs.com (source); Var data = this.travelInfo; Results = Templates (data); $ ('# Notifications_container') enclosed (results). } Notification.prototype.addon = function () {var number = + $ ('# Notification_indicator'). Html (); $ ('# Notifications_indicator') Html (number + = 1); } Notification.repotip .removeOne = function () {var number = + $ ('# notifications_indicator'). Html (); $ ('# Notifications_indicator') Html (number - = 1); } Notification.prototype.alitid = function () {warning ('notification with id:' + this.id + 'accept'); } Notification.prototype.bindfunction = function () {var self = this; This.el.on ('click', 'li. Accept', function () {self.alertId ();}); }  

The problem with my attitude is that if I actually make 10 elements, then the click event is showing 10 alerts 10 times. What do I want to know is how can I apply a system in which I provide an element and bind the element to events such as the way to tie events for each visible item of the spinal cord. I think the spinal cord is so big that what I need now is just information system, I hope you guys can help me find a way to do this.

If I am reading my question, it is okay, you are thinking it a little bit.

I believe that you are looking for something like this:

  & lt; Div & gt; & Lt ;! - This is where your HTML is - & gt; & Lt; Button type = "button" data-post-id = "10" & gt; Delete this post & lt; / Button & gt; & Lt; Button type = "button" data-post-id = "11" & gt; Delete this post & lt; / Button & gt; & Lt; / Div & gt;  

Now, on your onclick handler:

  function should be handled (click here) {// `` This element should be of reference. PostID = this.getAttribute ("Data-Post-ID"); // something with code}  

to complete the code ...

  element.setAttribute ("data-post-id", "11"); Element.removeAttribute ("Data-Post-ID");