Krdytkyu

I need some help finishing my code because I'm having a bit of trouble getting the syntax correct. I have a parse XML and I am using append to display the data. I am also trying to do on click event to send data to google analytics but here where I cannot get it right. This is what I want to add onclick="dataLayer.push({'event': 'button1-click'});" in the front end but I cannot add single quote in append.

this is the code

$(document).ready(function () {

  $.ajax({

      type: "GET",

      url: "https://www.nomuraconnects.com/rss/articles",

      dataType: "xml",

      success: parseXml

  });

});



function parseXml(xml) {

  $("#main").html("<div class='section group' id='content' data-role='listview' data-inset='true'></div>");

  $(xml).find("item").slice(0, 2).each(function () {

      $("#content").append("<a target='_blank' href='" + $(this).find("link").text() + "' onclick='dataLayer.push({});'><div class='col span_1_of_2'><div class='thumbnail'><img src='" + $(this).find("enclosure").attr('url') + "'/></div><div class='text-box'><h2>" + $(this).find("title").text() + "</h2><p>" + $(this).find("description").text() + "</p></div></div></a>");

  });

}

Thanks

You can use jQuery(html, attributes) to set event handlers, HTML and attributes of dynamically created element.

const dataLayer = ;



$("#content")

.append($("<a>",{

  target: "_blank" // set `target` attribute

, href: "javascript:void 0" // set `href` attribute

, html: "<div>parent div" // set `innerHTML`

       + "<div>child div 1<img alt='img'/></div>"

       + "<div>child div 2<h2>h2</h2><p>p</p></div></div>"

, on: { // set event handlers

       click: function(e) { // set `click` event

                dataLayer.push({"event": "button1-click"});

                console.log(dataLayer);

              }

      }

}));

.as-console-wrapper{max-height:25% !important}

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

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