Trying to show an alert when image is clicked with private Plugin using JQuery

Plugin builders
1

Hi everyone,

This is what I’m trying to achieve:
https://jsfiddle.net/9d1b53sx/

It works well in jsfiddle but when I try this code in Bubble (in a plugin I created), it doesn’t work at all.

This is the preview link of the project where I use the plugin:

And just to confirm, the Jquery dependency is turned on.

All I’m trying to do, is to show an alert when I click on the image.
I’ve made sure the div of the image has the ID Attribute (“foo” in this example).

I’m not sure what’s preventing the alert to show when I click on the image.

If you have any ideas, I would be really grateful.

Thanks!

2

Why do you want to use a plugin when you can use native Bubble alert for that?
You will need to share plugin script you have

3

Actually this is just a small experiment.
I was just testing the ability to trigger an action by clicking on a specific element.

The script is exactly the same as the one I shared previously on jsfiddle:

$("#foo").on("click", "img", function (event) {
    // console.log('a');
    alert("hello");
});

Nothing too fancy here but I’m wondering why it’s not working.

4

Yes but can you share the plugin script where did you put this? In which part?
You need to be sure element is loaded before triggering update part of the plugin.

5

I’ve put the script here:

Screenshot 2021-04-10 at 14.09.51
Screenshot 2021-04-10 at 14.09.511262×436 46.2 KB

6

Could be a case that the script runs before the page is rendered, so we’re trying to add an event listener to something that’s not there yet.

Try wrapping it in $(document).ready(); ?

2 Likes
7

This code is ran before the rest of your screen is loaded and is intended to be loading libraries/style sheets and other useful goodies you may need after the rest of your page loads.

You could shift that code to an action and only run the action when page load (entire) is true

That would delay the code from running until the image is also loaded. Unlesssss your image is not visible when the rest of the page is loaded anyway. In that case you’d want to wait until the image is visible to run that code snippet.

1 Like