javascript - JS-自定义文本图标-ES6回调点击

Question

function textIcon(_holder, _icon, _text, _on_click) {
    _holder.append(`
     <text-icon onclick="${() => { _on_click() }}">
         <icon class="${_icon}"></icon>
         <text>${_text}</text>
     </text-icon>
  `);
}

onclick="${() => { _on_click() }}"中没有错误，但回调不起作用。

Answer 1

内联 js 已被评估，因此:

onclick="${() => { _on_click() }}"

不起作用，因为它相当于

()=>{ _on_click() }

这只是一个函数。你想要的是一个函数调用，所以:

onclick="(${() => { _on_click() }})()"

最终会是

(()=>{ _on_click() })()

并被评估为立即执行的函数。当然，所有这些都可能是:

onclick="_on_click()"

即使使用立即执行的函数，这在调用 _on_click 时仍然不起作用，因为该函数仍然需要在全局范围内才能执行。

您可以只插入 html 并在元素上添加事件监听器:

var textIcon = $(`<text-icon>
                      <icon class="${_icon}"></icon>
                      <text>${_text}</text>
                  </text-icon>`);
//Add it to the dom
_holder.append(textIcon);

//Add click event listener
textIcon.on('click',_on_click);
//And if for some reason you need an arrow function
textIcon.on('click',()=>{
   _on_click();
});

演示

function textIcon(_holder, _icon, _text, _on_click) {
  var textIcon = $(`<text-icon>
                        <icon class="${_icon}"></icon>
                        <text>${_text}</text>
                    </text-icon>`);
  _holder.append(textIcon);
  textIcon.on('click', () => {
    _on_click();
  });
}

textIcon($('#container'),'someicon','some text',()=>console.log('in callback'));

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