Steven Steven - 4 months ago 7
jQuery Question

Why am I getting this weird “​” line break?

A similar question have been asked (and answered), but there were no answer / solution on how to fix it

I'm using jQuery Mobile / Handlebars for my Phonegap project. Up till now everything seemed to work just fine. But suddenly I get this weird line break:

"​ "


enter image description here

I use the following code to make the list:

// HTML
<ul id="guideListView" data-role="listview" ></ul>

<script id="guideListTemplate" type="text/x-handlebars-template">​
{{#if this}}
{{#each this}}
<li class="guide">
<a href="{{guideUrl}}{{id}}" data-transition="slide" class="ui-nodisc-icon" >
<div class="name">{{name}}</div>
<div class="num-stores-container no-bold small">Stores: <span class="num-stores">{{storesCount}}</span></div>
</a>
</li>
{{/each}}
{{else}}
<li class="ui-btn">Sorry, no guides for <span class="city"></span></li>
{{/if}}
</script>

// JS
var template = Handlebars.compile($("#guideListTemplate").html());
$('#guideListView').append(template(guides));
$('#guideListView').listview().listview('refresh');


Does anyone know what might be causing this?

updated

I've tried using
("#guideListTemplate").html().trim()
and
$('#guideListView').html(template(guides));
, but that didn't make any difference. Could this be a big in jQuery Mobile?

A bit more debugging and it seems the problem might lie in this:

<script id="guideListTemplate" type="text/x-handlebars-template">​

Answer

Ok, so I found a solution from this thread.

The problem is that when you try to fetch the html of a javascript string, you might get zero width space.

Unicode has the following zero-width characters:

  • U+200B zero width space
  • U+200C zero width non-joiner Unicode code point
  • U+200D zero width joiner Unicode code point
  • U+FEFF zero width no-break space Unicode code point

So to fix my problem by I use regular expression to remove the unicode charecter:

var source = $("#guideListTemplate").html().replace(/[\u200B]/g, '');
Comments