Function Remove not defined - Jquery (Ajax)

Question

I am trying to run a function using onClick in my icon. When i click on the icon, i get the error

Remove is not defined in index.php

I have defined the function in my code below but i can't tell why the issue is not being solved. What i am trying to achieve is,

I am passing the value element.id to the function Remove(element.id) so i can retrieve and alert the value passed in the function Remove. Any help please?

PS: Beginner with Jquery

$('#button').click(function() {
  var item_name = $('#name').val();
  var item_cost = $('#cost').val();
  $.ajax({
    url: '<?php echo base_url('shop/items'); ?>',
    data: '&item_name=' + item_name + '&item_cost=' + cost,
    type: 'POST'
  }).done(function(result) {
    var obj = $.parseJSON(result);
    $.each(obj, function(index, element) {
      $('#table').append("<tr><td>" + (index + 1) + "</td><td><i onclick='Remove(" + element.id + ");' id='icon'  class=\"icon-refresh\" title=\"click here\"></i></td></tr>");
      $('#icon').click(function() {
        function Remove(item) {
          alert(item);
        }
      });
    });

The problem is because when calling a function from an `on*` attribute you need to define it in global scope. This is part of the reason they should be avoided. I would suggest using a delegated event handler instead, eg. https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Rory McCrossan, Jul 09 '19 at 09:50
`delegate()` is, but not `on()` when used as a delegate. A little confusing I know, but it's explained in the docs: https://api.jquery.com/on/#direct-and-delegated-events. I've also added an answer for you below which hopefully makes it clearer — Rory McCrossan, Jul 09 '19 at 09:55

Rory McCrossan · Accepted Answer · 2019-07-09T10:13:24.387

2

There's a couple of issues here. Firstly, the error you're seeing is because when you use a on* attribute the function you call needs to be within global scope, however you defined it within a jQuery click handler.

Secondly, you're repeating the id attributes in each new i element you create. This is invalid as id must be unique within the DOM. As such use a common class to group elements by behaviour.

Lastly, when dealing with dynamically created elements you would be best to use a single delegated event handler.

With all that in mind, try this:

$('#table').on('click', '.icon', function() {
  console.log($(this).data('id'));
  // implement whatever logic should run when the <i> is clicked here...
});

$('#button').click(function() {
  var item_name = $('#name').val();
  var item_cost = $('#cost').val();

  $.ajax({
    url: '<?php echo base_url('shop/items'); ?>',
    data: {
      item_name: item_name,
      item_cost: cost
    },
    type: 'POST'
  }).done(function(result) {
    var obj = $.parseJSON(result);
    $.each(obj, function(index, element) {
      $('#table').append('<tr><td>' + (index + 1) + '</td><td><i data-id="' + element.id + '" class="icon-refresh" title="click here"></i></td></tr>');
    });
  });
});

edited Jul 09 '19 at 10:13

answered Jul 09 '19 at 09:55

Rory McCrossan

331,213
40
305
339

I still keep getting the same error `Remove is not defined` – Switzz Jul 09 '19 at 10:09
My bad, I assumed you'd already created the `Remove()` function in your codebase. I updated the answer for you – Rory McCrossan Jul 09 '19 at 10:13
Works as expected!!!!!. Thanks for the detailed info and answer. Kindly make an update `'.icon'` as `#icon` in your answer too...Thanks a lot, Sir – Switzz Jul 09 '19 at 10:16
I'd wager that the ID is not even necessary. The OP has only used it in an attempt to link their event handler to something. – Tomalak Jul 09 '19 at 10:16
1

`Kindly make an update '.icon' as #icon in your answer too..` You can't do that as it results in duplicate `id` which is invalid – Rory McCrossan Jul 09 '19 at 10:28

Function Remove not defined - Jquery (Ajax)

1 Answers1