How to implement a custom jQuery function


#1

Hi all,

It’s kinda weird question and yes I know it’s not the way you have to do it but I can’t do this without jquery.
My app is duplicating buttons, after it duplicates the button it is possible to give it a position with drag / dropping on the page.

But now the question, if the button has been dragged and it sticks on his position. I want when you click on it that there would be a possibilty to delete it.

Where in which file I can create common jQuery functions like this:

$('.was-draggable).click(function() {
   $(this).removeClass('cloned');
   $(this).hide();
});

It doesn’t matter when I want to call this, it have to work everywhere when I want to call.

I hope i provided enough information and I hope some one can help me out with this issue.

Thanks in advance.


#2

A script tag in index.html probably… (Damn that is ugly code then - but you wanted it that way :stuck_out_tongue: )


#3

Already tried in the index.html. But then I get the message $ is not defined.
But I got jquery imported in app.module.ts and app.component.ts.
Yeah I know it’s ugly code. But there is no other nice solution for it :frowning:


#4

How exactly are you importing jQuery?


#5

Like this, inside my home.ts and inside my app.component/module.ts

import * as $ from 'jquery';

#6

So you installed it via npm?
How are you using it for now?


#7

There has got to be a way to achieve this without jQuery and direct DOM hackery. Can’t you use an ngFor loop and property binding to set button position?


#8

I tried a lot.
But without success. I need jQuery for this solution.

Yes I installed trough npm.
I’m using it to make a duplicate of a button that gets rendered dynamically.


#9

No, I mean, what code do you already have using this npm installation of jQuery.


#10

If you need jquery you’re already on the wrong path