javascript - 处理 Jquery 模板中的特殊字符

Question

当 row[1] 为 Swap'nil 时，它会在控制台中抛出错误:

Uncaught Syntax Error: missing ) after argument list.

如何在 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 编码。您的模板库应该包含有关如何执行此操作的说明。