如何将点击事件绑定到对象标签？ [英] How to bind click event to object tag?

问题描述

我有这段代码

 < object data =images / logo.svgtype =image / svg + xmlclass =icon-logo>< / object> 
  

和jquery

  $（。icon-logo）。click（function（）{
 ..... 
}）; 
  

但我无法点击事件。

解决方案

1。问题：事件处理

关于jQuery部分，尝试使用事件委托。

从 docs ：

.on（）方法将事件处理程序附加到jQuery对象中当前选定的元素
中。

< script src =https://ajax.googleapis.com/ajax
 

$ b

---

在@ Kaiido的评论后编辑：

2.问题：< object> 元素不能被点击。

一种可能是不使用< object> 完全不是< $ cg> 标签，而是像这样回答：制作html svg对象也是一个可点击的链接。

---

2。问题：空的HTML标签

这种标签< object> 需要在页面上显示一些内容。

您的标记：

< object data =images / logo.svgtype =image / svg + xmlclass =icon-logo >< / object>

没有任何内部HTML内容，所以您将无法点击它。

I have this code

<object data="images/logo.svg" type="image/svg+xml" class="icon-logo"></object>

and jquery

$(".icon-logo").click(function() {
.....
});

but I can't click event.

解决方案

1. Issue: Event handling

Concerning the jQuery part, try to use event delegation.

From the docs:

The .on() method attaches event handlers to the currently selected set of elements in the jQuery object.

$(document).on('click', '.icon-logo', function(event) {
    document.write('Event type: ' + event.type);
    document.write('<br>CSS-Class: ');
    document.write($(this).attr('class'));
});
// As said in the docs, you can attach multiple events to multiple selectors. 
// A typical example of use may be:
// $(document).on('change blur', '.icon-logo .some-other-class', function() {...}
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<object data="images/logo.svg" type="image/svg+xml" class="icon-logo" style="cursor: pointer;">Click me!</object>

---

Edit after @Kaiido's comment:

2. Issue: The <object> element can't be clicked.

One possibility could be to not use an <object> at all but an <img> tag instead as suggested in this SO answer: make an html svg object also a clickable link.

---

2. Issue: Empty HTML-tag

This kind of tag <object> needs some content to show up on the page.

Your tag:

<object data="images/logo.svg" type="image/svg+xml" class="icon-logo"></object>

is not having any inner HTML-Content, so you won't be able to click it.

这篇关于如何将点击事件绑定到对象标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！