Angular 5 and jQuery: (click) not calling function

Question

I am currently working with Angular 5 and jQuery. I created a dynamic div through jQuery which I appended to a div.

var push_div = '<div class="col-md-6">
                <span style="color: green;">' + 
                droppedItemID + '</span>&nbsp;
                <a href="javascript:void(0)" 
                (click)="removeContent()">X</a>
                </div>'
$(push_div).hide().appendTo("#" + dropZoneID).fadeIn(1000);

When I click on the link, the removeContent function is not calling.

removeContent() {
    console.log("function called");
}

link text or link text ref: https://stackoverflow.com/questions/1070760/javascript-function-in-href-vs-onclick — King, Feb 18 '20 at 05:48
@King If I used onclick, then it shows `Uncaught ReferenceError: removeContent is not defined` — Niladri Banerjee - Uttarpara, Feb 18 '20 at 05:49
Click me or ref: https://stackoverflow.com/questions/35639174/passive-link-in-angular-2-a-href-equivalent — King, Feb 18 '20 at 05:52

score 1 · Answer 1 · answered Feb 18 '20 at 05:50

1

Remove this -> href="javascript:void(0)" from <a> tag.

answered Feb 18 '20 at 05:50

Vijay Prajapati

738
1
7
20

Harun Yilmaz · Accepted Answer · 2020-02-18T06:07:03.277

It's by design. Angular does not handle bindings defined in strings such as innetHTML bindings. (click) binding will not be processed in your situation.

You can do it like:

var dropZoneID = 'dropZone'
var droppedItemID = 'droppedItemID'

function removeContent() {
  console.log('removeContent');
}

var push_div = '<div class="col-md-6"><span style="color: green;">' + droppedItemID + '</span>&nbsp;<a href="javascript:void(0)">X</a></div>'
$(push_div).hide().appendTo("#" + dropZoneID).fadeIn(1000);

// Using $(document).on(...) to bind events to dynamically created elements
$(document).on('click', $(push_div).find('a').eq(0), function() {
  removeContent()
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<div id="dropZone"></div>

For further details:

https://stackoverflow.com/a/37676847/1331040

https://stackoverflow.com/a/50809586/1331040

I did like `$(push_div).click(function(){ this.removeContent() });` but it did not work. Can you please look into it again. — Niladri Banerjee - Uttarpara, Feb 18 '20 at 06:00
I updated the answer and added a snippet. Please have a look at it. — Harun Yilmaz, Feb 18 '20 at 06:15

Angular 5 and jQuery: (click) not calling function

2 Answers2