The table is formed in Ajax:

$.ajax({ url : "/caferacer/menu/menus", contentType : 'application/json', data : JSON.stringify(PlaceIdJson), type : 'POST', success : function(data) { var obj = JSON.parse(data); var table = $('#field'); $('#field').empty(); $(obj).each(function(i, menu){ $('<tr/>').appendTo(table).append($('<td/>').text(menu.name)) .append($('<td><a onclick="remove('+menu.id+')" class="fa fa-trash-o" />')); }); }, error : function(xhr, status, errorThrown) { alert('adding component failed with status: ' + status + ". " + errorThrown); } });

Following from this code, here is the user html:

enter image description here

From the screenshot it can be seen that the attribute to the link is bound and the correct parameters were received.

The function remove () itself is not called at all, but it is visible in the browser in scripts. When I click on the link, the icon (awesomefont icons) simply disappears using it instead of a line, but the event (onclick) does not occur.
The remove () function should remove the menu from the table, but when I set breakpoints, it doesn’t even work as it doesn’t work at all. When you click on the link, it just disappears and no more action.

Update1

 function remove(id){ MenuJson = { id:id } $.ajax({ url : "/caferacer/menu/removeFromPlace", contentType : 'application/json', data : JSON.stringify(MenuJson), type : 'POST', success : function(data) { alert('deleted'); }, error : function(xhr, status, errorThrown) { alert('adding component failed with status: ' + status + ". " + errorThrown); } }); }

Nothing comes to data because the function is not executed in principle. It should work on onclick, but does not work.

  • just disappears icon, what icon disappears? What does the remove function do? What event does not happen? - Grundy
  • @Grundy updated the question, tried to describe in more detail - raviga
  • one
    add to the question: remove function code and example what you get in data - Grundy
  • @Grundy added remove () function - raviga
  • see errors in the browser console - Grundy

1 answer 1

The problem is the name of the function and the context in which it is called.

With inline handlers, this points to the element that was clicked, as well as all the functions are searched first in the properties / methods of this element, and in this case the remove() function is called, and only then in the global context.

 var table = $('#field'); $('#field').empty(); $([{ id: 1, name: 'sd' }, { id: 2, name: 'sddf' }]).each(function(i, menu) { $('<tr/>').appendTo(table).append($('<td/>').text(menu.name)) .append($('<td><a href="#" onclick="console.log(remove,this, this.remove==remove);" class="fa fa-trash-o" >Text</a>')); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="field"> </table>

The simplest solution: rename the function, for example, removeMenu

  • it works now! thanks) - raviga