[SOLVED] Dynamic content with onclick function?

Hi, I’m using the cordova social sharing plugin and I’m trying to use it onclick like this :

<a onclick='window.plugins.socialsharing.share("{{event_url}}")' class="link"><i class="material-icons md-only">share</i></a>

Also, with my infinite scroll, the request append cards like that :

<a onclick=\'window.plugins.socialsharing.share("'+data[i].event_url+'")\' class="link"><i class="material-icons md-only">share</i></a>

But when I build it, only the second one works, The first one open the cordova share but the content is empty !

Looks like it’s a quote issue, but I don’t understand how to solve this ?

I guess you use it in a page router component? Can you share more relevant code? Would super good to see whole page file

Sorry !

Here’s the template :

<div class="page" data-name="explore">
  <div class="navbar no-shadow">
    <div class="navbar-inner sliding">
      <div class="title">Explorer</div>
      <div class="right">
        <a href="#" class="icon-only" data-popup="#popupFilters">
          <i class="icon material-icons md-only">filter_list</i>
  <div class="page-content infinite-scroll-content ptr-content">
    <div class="ptr-preloader">
      <div class="preloader"></div>
      <div class="ptr-arrow"></div>
    <div class="events">
      {{#each events}}
      <div class="card card-header-pic">
        <a href="/event/{{event_ID}}/" class="">
          <div data-background="{{event_picture}}" class="card-header align-items-flex-end lazy lazy-fade-in"></div>
        <div class="card-content card-content-padding">
          <div class="block-title no-margin"> {{event_title}} </div>
          <p class="date"> {{event_date_start}} {{#if event_date_end}} - {{event_date_end}} {{/if}} </p>
          <div class="block block-strong"> {{event_excerpt}} </div>
        <div class="card-footer">
          <a onclick='window.plugins.socialsharing.share("{{event_url}}")' class="link"><i class="material-icons md-only">share</i></a>

          <a href="#" class="link"><i class="material-icons md-only">favorite_border</i></a>
          <a href="/event/{{event_ID}}/" class="link"><i class="material-icons md-only">visibility</i></a>
    <div class="preloader infinite-scroll-preloader"></div>


The script in bottom :

  return {
    data: function () {
      return {
        events: null,
    on: {
      pageInit() {
        var self = this;
          .then(function (data) {
            // console.log(data)
            self.$setState({ events: data })

With the infinitescroll function, I simply make a loop with api promise then use it like that :

for (var i = 0; i < data.length; i++) {
              $$('.events').append('<div class="card card-header-pic"><a href="/event/'+data[i].event_ID+'/" class=""><div data-background="'+data[i].event_picture+'" class="card-header align-items-flex-end lazy lazy-fade-in"></a></div><div class="card-content card-content-padding"><div class="block-title no-margin">'+data[i].event_title+'</div><p class="date"> '+data[i].event_date_start+'</p><div class="block block-strong">'+data[i].event_excerpt+'</div></div><div class="card-footer"><a onclick=\'window.plugins.socialsharing.share("'+data[i].event_url+'")\' class="link"><i class="material-icons md-only">share</i></a><a href="#" class="link"><i class="material-icons md-only">favorite_border</i></a><a href="/event/'+data[i].event_ID+'/" class="link"><i class="material-icons md-only">visibility</i></a></div></div>');


When I debug, It’s empty :


Replace the ’ ’ with &quot;

'<a onclick="window.plugins.socialsharing.share(&quot;{{event_url}}&quot;)" class="external button button-fill button-raised" target="_system"><i class="mdi mdi-share"></i></a>'

I tried, same thing : empty !

it’s rare, it’s working for me.

Yes all ways works in browser, but when I compile and install the apk, it’s empty…
But not when I append

add target="_system" and external class to href just to try, it’s the only diference.

1 Like

I didn’t see these attributes
What the fuck, it works :astonished:

Can you explain me why ?

is for href that links outside the app,. if you want to open wikipedia, you need to add external to the link, or it won’t open.

is needed to pen some external apps from inside app. To open WhatsApp you need to add target=“system” and class=external"

For example:
<a href="whatsapp://send?phone=the_phone_number&text=Text%20goes%20here" class="link external" target="_system">WhatsApp</a>

%20 = space

I totally understand how they work but I do not understand how it can affect the rendering of the variable… Totally weird :no_mouth:

Anyway, thanks a lot dude !

I don’t understand too,.
great it works.