Passing parameters to JavaScript dynamically from dynamically created link

Question

I am trying to pass an array variable to my JavaScript method captureDetails(). However, it is throwing me error

Uncaught SyntaxError: Unexpected identifier

What am I doing wrong? I tried everything whatever is mentioned in other related posts, but no luck.

if (event.status) {
    $("#targetId").empty();
    $("#targetId").append("<ul>Please select if this is your organisation</ul>");
    for(var i = 0; i < result.length; ++i){

        var li = "<li><a href=\"#\" onclick=\"return captureDetails("+result[i]+");\">";
        $("ul").append(li.concat(result[i].Name))
    }
}

You are already using jQuery, why are you using inline javascript instead of [click()](api.jquery.com/click). Plus a class name to your anchors and a data attribute holding i and simply done. — Adib Aroui
– Adib Aroui, Commented Jul 9, 2015 at 3:16

Arun P Johny · Accepted Answer · 2015-07-09 03:15:35Z

2

The problem here is the unformatted inline event handler, which creates a invalid syntax.

A more appropriate solution here will be is to use event delegation along with data-* api to store the data.

//just for testing purpose
var event = {
    status: true
  },
  result = [{
    name: 'abc',
    id: 1
  }, {
    name: 'asdf',
    id: 2
  }]

if (event.status) {
  $("#targetId").html("Please select if this is your organisation");
  var $ul = $('<ul />');
  for (var i = 0; i < result.length; ++i) {
    var $li = $('<li />').appendTo($ul);
    $('<a />', {
      text: result[i].name
    }).data('obj', result[i]).appendTo($li)
  }
  $("#targetId").append($ul)
}

//in dom ready handler
$("#targetId").on('click', 'ul a', function() {
  var obj = $(this).data('obj');
  snippet.log('clicked on: ' + JSON.stringify(obj));
});

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<!-- To show result in the dom instead of console, only to be used in the snippet not in production -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="targetId"></div>

answered Jul 9, 2015 at 3:15

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adib Aroui Over a year ago

This is very very elgant, just what I explained in comment but put professionnaly. Thank you plus one

Collectives™ on Stack Overflow

Passing parameters to JavaScript dynamically from dynamically created link

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related