How to concat html object to html string using jquery?

Question

I have created a loop and below is the part of the code between that loop

--- Loop Starts ---

var aElement = $('<a>');
aElement.attr('href', '#');
aElement.text(title);

aElement.click(function() {
    alert("Hello World);
});

video_list_html += '<tr>' +
                        '<th scope="row">' + count + '</th>' +
                        '<td>' + aElement + '</td>' +
                    '</tr>';
--- Loop Starts ---

But as aElement is an object, it doesn't attach as html tag to the video_list_html but it attaches like this

[object Object]

How do I fix this, so that it attaches inside the video_list_html and also the .click() event stay working.

You cannot concat aElement as string without loosing event listeners. If you don't want to use the event listener, you have to append aElement using appendChild — t.niese
– t.niese, Commented Jul 16, 2017 at 14:29

Killer Death · Accepted Answer · 2017-07-16 14:35:15Z

1

Try using aElement[0].outerHTML instead of aElement. Leave click handler as is.

edited Jul 16, 2017 at 14:35

answered Jul 16, 2017 at 14:31

Killer Death

4612 silver badges10 bronze badges

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

4 Comments

t.niese Over a year ago

Who should this keep the event listener? aElement.outerHTML would result in a string with out any informations about event listeners that have been attached.

aslamdoctor Over a year ago

True, it appends the html tag fine but the click event doesn't work. Just tried to confirm

Killer Death Over a year ago

The new element will need another handler if that's what he wants, of course, the first handler for the original element remains untouched. I understood that's the idea

Killer Death Over a year ago

The old element and the new element created using HTML string are two different elements, naturally that another element needs another handler, I meant to say that first handler will still work for the first element.

Rory McCrossan · Accepted Answer · 2017-07-16 14:36:45Z

0

The issue is because you cannot append an object to a string. The object gets coerced, ans the result is, as you've seen, [Object object].

A better solution to this problem would be to append the new HTML as one entire string, then use a delegated event handler to catch the events from those dynamically added elements. Try this:

var data = [{
  videoId: 'abc123',
  title: 'Video #1'
}, {
  videoId: 'xyz987',
  title: 'Video #2'
}]

var video_list_html = data.map(function(o, i) {
  return '<tr><th scope="row">' + i + '</th><td><a href="#" data-videoid="' + o.videoId + '">' + o.title + '</a></td></tr>';
}).join('');

$('#yourTable').append(video_list_html).on('click', 'a', function(e) {
  e.preventDefault();
  console.log($(this).data('videoid'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="yourTable"></table>

edited Jul 16, 2017 at 14:36

answered Jul 16, 2017 at 14:33

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

2 Comments

aslamdoctor Over a year ago

The thing is where I have done alert(), I have actually called my own function with and ID as argument that I got in the loop. Like this displayVideoAnalytics(videoId); to be straight, I am working on youtube analytics api and this was one of the code from it which I modified for my needs

Rory McCrossan Over a year ago

Don't do that. Put the videoId in a data-* attribute on the element which you can retrieve within the single delegated click event handler. I updated the question to show you how to do this.

Collectives™ on Stack Overflow

How to concat html object to html string using jquery?

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related