处理Jquery模板中的特殊字符

Question

当row[1]是Swap'nil它将在控制台中引发错误：

参数列表后出现未捕获的语法错误：缺少）。

如何处理jQuery中的此类特殊字符，以便能够使用给定名称调用testFunction() ？

<script type="text/x-jquery-tmpl" id="tmplTest">
  {{each(i, row) data}}
    <a href="javascript:void(0)" onclick='javaScript:testFunction('\${row[1]}');'>Click here</a>
  {{/each}}
</script>

function testFunction(name) {
  alert("test");
}

Answer 1

通过使用不引人注目的JS附加事件而不是过时的on*事件属性，您既可以避免问题，又可以改善逻辑。 您还可以使用data属性来存储所需的值。

由于您已经在页面中包含了jQuery，请尝试以下操作：

$(function() {
  $(document).on('click', '.link', function(e) {
    e.preventDefault();
    var name = $(this).data('name');
    console.log(name);
  });
});

<script type="text/x-jquery-tmpl" id="tmplTest">
  {{each(i, row) data}}
    <a href="#" data-name="${row[1]}" class="link">Click here</a> 
  {{/each}}
</script>

请注意，您可能仍需要对放置在data属性中的值进行HTML编码。 您的模板库应包含有关如何执行此操作的说明。