Syntax wrong for onclick event on string template

Question

The onclick event on the return template doesn't do anything

{
    field: '',
    title: '',
    width: '80px',
    template: function (record) {
        return (
            '  <a href="javascript:void(0);" class="btn btn-xs btn-success margin-top-5 margin-bottom-5 btn-lg, btn-sucess"  ng-class="btnClass" ng-click="console.log(record)"> <span>Add</span> </a>'
        );
    }
},

Tried changing the string of the a tag, still unable to call ng-click method.

Perhaps [delegation is an idea](https://stackoverflow.com/questions/13965627/angular-ng-click-event-delegation) — mplungjan, Dec 09 '22 at 08:28
@mplungjan is is used part of a bigger object for options on a kendo grid — Chris, Dec 09 '22 at 08:42

Bozhinovski · Accepted Answer · 2022-12-09T09:05:17.810

1

You have "javascript:void(0)" which is a function in JavaScript that returns undefined. When you click it it wont do anything. Just change href="#" Also update the ng-click to prevent default:

href="#" ng-click="$event.preventDefault();console.log(record)"

For more information: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void

edited Dec 09 '22 at 09:05

answered Dec 09 '22 at 08:37

Bozhinovski

2,496
3
20
38

so is the ngClick not necessary , can I add a console log at the href – Chris Dec 09 '22 at 08:41
You can use that, but make sure to remove javascript:void(0) because it overrides ng-click. Or just use href="#" – Bozhinovski Dec 09 '22 at 08:41
still not working – Chris Dec 09 '22 at 08:50
appologies how can I make something like this work '' – Chris Dec 09 '22 at 08:56
having trouble with where to add the quotation marks – Chris Dec 09 '22 at 08:57
try like this, href="#" ng-click="$event.preventDefault();console.log(record)" – Bozhinovski Dec 09 '22 at 08:59

Syntax wrong for onclick event on string template

1 Answers1