Listen to Click Event on Toast element

[DRPS]

 I am currently using the Draggable and TweenMax plugins and one of them seems to be causing a weird issue.

 

I have a toast element which I make visible via TweenMax and I am using Draggable.create on another element on the site.

<div class="toast"><p>Hello World</p></div>

jQuery(document).ready(function($) {
    $(document).on("click", ".toast", function() {
        alert('clicked');
    });
});

When I rename .toast to anything else like .my_toast and then want to register the click on it via jQuery my code is working just fine.

 

So what could cause this problem? Do TweenMax or Draggable prevent the Click event to be registered?

[Jonathan]

Hello DRPS and welcome to the GreenSock Forum!

 

Have you checked out the Draggable Docs? :

 

http://greensock.com/docs/#/HTML5/Drag/Draggable/

 

Do you have your Draggable code for context?

 

Also please note the below:

• If you want a particular element to be "clickable", thus ignored by Draggable, simply add a data-clickable="true" attribute to it, or an onclick. By default, Draggable automatically ignores clicks on<a>, <input>, <select>, <button>, and <textarea> elements. If you prefer to run your own logic to determine if an object should be considered "clickable", you can set the clickableTest config property to a function of your choosing that returns true or false.
   
• dragClickables : Boolean - By default, Draggable will ignore clicks on <a>, <input> <select>,<button>, and <textarea> elements (as well as any element that has a data-clickable="true"attribute), allowing the browser's default behavior (like clicking on an input would give it focus and drop the cursor there to begin typing), but if you want Draggable to hijack those clicks and initiate dragging instead, set dragClickables:true.

If you are still having issues. Please setup a limited codepen demo example that shows your issue. This way we can test your code live to better assist you and see what you are seeing in context.

 

 

Thanks!