直接单击图标时未传递按钮的值属性

1rhkuytd 于 2021-09-23 发布在 Java

关注(0)|答案(1)|浏览(384)

我有一个使用引导创建的html按钮，它本质上是一个用于切换网站上项目状态的图标。

<button class='btn' value='${noteid}' onclick='toggleAck(event)'><i class="fas fa-eye"></i></button>

单击时，将触发一个请求：

function toggleAck(event) {
            const noteid = event.target.value
            console.log(event.target)
            $.post({
                    url: `/note/${noteid}/toggleacknowledge`,
                    dataType: "json"
                },
                (response) => {
                    if (!response.success) {
                        alert("Failed to mark as read")
                    }
                    refreshNotes()
                }
            )
        }

无论我是单击按钮还是图标，toggleack事件都会触发。但是，如果我直接单击图标而不是按钮 value 属性未传递，函数失败。
如何修复此html，以便无论用户单击何处，都能传递值？

jquery JavaScript Html jinja2 bootstrap-4

来源：https://stackoverflow.com/questions/68476607/value-attribute-of-button-not-passed-when-icon-is-clicked-directly

1条答案

按热度按时间

ivqmmu1c1#

这个 value 在按钮上，但是 event.target 是触发事件的元素，因此当您单击图标时，它会尝试从图标中检索值。
改用 event.currentTarget 从侦听器附加到的元素中获取值。

const noteid = event.currentTarget.value;

function toggleAck(event) {
  console.log('target: ', event.target, event.target.value);
  console.log('currentTarget: ', event.currentTarget, event.currentTarget.value);
}

<button class='btn' value='${noteid}' onclick='toggleAck(event)'><i class="fas fa-eye">icon</i></button>

赞(0）回复(0）举报 2021-09-23

我来回答

直接单击图标时未传递按钮的值属性

1条答案

相关问题

热门标签

最新问答