0

How do I create a <p> tag dynamically and assign it to a var when I click it, it should go to a function goTo and know in what <p> I clicked, in order to access the index of the array lastGoals.

And I have other problem, it is 30 in "30s" I do this function to update and when I click it call the function many times I updated with this function. I know the i is not in the scope of $(document).on(); there is other problem because if I put inside the for it will be addind the click in a bad way I think.

var isFirstTime = true;
var text = '<p class="boxLastGoals">test</p>';
var size = lastGoals.length;
for (var i = 0; i < size; i++) {
   if (isFirstTime) {
   $('#listLastGoals').html(text);
      isFirstTime = false;
    } else {
       $('#listLastGoals').append(text);
    }
}

$(document).on('click', 'p.boxLastGoals', goTo(event, i));
Tiago Sousa
  • 138
  • 2
  • 13

1 Answers1

1

Assuming you are happy using JQuery you can use JQuery to create the <p> element for you inside the loop and attach the click handler dynamically in there. You can also attach the data to the element using the .prop('value', 'test'); method so it can be accessed inside the click handler like $(this).prop('value');.

I've updated my example to include a loop and access a variable to match your scenario

Example

HTML

<div id="content">  
</div>

JavaScript

$(document).ready(function() {
  var list = ['goal 1', 'goal 2', 'goal 3', 'goal 4', 'goal 5'];

  for (var i = 0; i < list.length; i++) {
    var text = list[i];
    var pEl = $('<p></p>', {
      text: text
    });

    pEl.prop('arrayIndex', i);
    pEl.on('click', function(e) {
      goToGoal(e, $(this).prop('arrayIndex'));
    });

    $('#content').append(pEl);
  }
});

function goToGoal(e, i) {
  alert('go to goal: ' + i);
}

JSFiddle to demonstrate

Will.Harris
  • 4,004
  • 2
  • 24
  • 37
  • When i refresh it calls the function that i call in all iteration of the `for`. `$(document).ready(function() { var pEl = $('

    ', { text: text }).on('click', goToGoal(event, i));`     – Tiago Sousa Mar 23 '16 at 10:39
  • It should only call the `goToGoal` function once per element. I'm going to update my answer again because to remember values you will need to attach them to the element using `prop()` – Will.Harris Mar 23 '16 at 10:50
  • I followed you example but with this [http://stackoverflow.com/questions/3273350/jquerys-click-pass-parameters-to-user-function](http://stackoverflow.com/questions/3273350/jquerys-click-pass-parameters-to-user-function) – Tiago Sousa Mar 23 '16 at 10:57
  • Message me I dont know where to start the chat :) – Tiago Sousa Mar 23 '16 at 11:07
  • Not entirely sure how to do it but heres a link for a chat room ive created http://chat.stackoverflow.com/rooms/info/107123/dynamically-create-p-tag?tab=general – Will.Harris Mar 23 '16 at 11:14
  • Yeah i putted to work with your example not strict but with mostly but i dont know how to change this `var pEl = $('

    ', { text: text }` because is showing the tags and not interpreting. And sorry for my english.     – Tiago Sousa Mar 23 '16 at 11:16
  • Maybe this link will work http://chat.stackoverflow.com/rooms/107123/dynamically-create-p-tag – Will.Harris Mar 23 '16 at 11:21
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/107125/discussion-between-tiago-sousa-and-will-harris). – Tiago Sousa Mar 23 '16 at 11:32