javascript - How to bind click event to object tag?

Question

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.

Answer 1

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>