Javascript function not called in a dynamically generated page

Question

I have a web application in which I am generating some HTML content based on the response to an AJAX call. In the HTML, I am creating some links with onclick() event wired to another Javascript function in the same page. But when the page loads and the links are generated in the final rendered HTML output, clicking on the links does not call the bound Javascript function. Am I doing anything wrong here? Can someone help me how to solve this issue?

Here's the Javascript function to generate the HTML code:

function getBotsStatus() {
            $.post('/bot/status', {
            }).done(function(bots_status) {
                all_bots_status = bots_status['bots_status'];
                $('#bots_table').html('');
                for (var one_job in all_bots_status) {
                    var text = '';
                    if (all_bots_status[one_job] == 'running')
                        text = '<tr><td>' + one_job + '</td><td>' + all_bots_status[one_job] + '</td><td><a href=\'\' onclick=\'postStartBot(\'' + one_job + '\')\'>Start</a></td></tr>';
                    else if (all_bots_status[one_job] == 'stopped')
                        text = '<tr><td>' + one_job + '</td><td>' + all_bots_status[one_job] + '</td><td><a href=\'\' onclick=\'postStopBot(\'' + one_job + '\')\'>Start</a></td></tr>';
                    $('#bots_table').append(text);
                }
            }).fail(function() {
                alert('Error');
            });
        }

Instead of adding onclick on td ,you can attach event handlers through javascript/jQuery using $(document).on('click','td',function(){}); — Geeky
– Geeky, Commented Dec 2, 2016 at 5:00

Geeky · Accepted Answer · 2016-12-02 05:02:54Z

1

Adding click handler on href for a tag is a bad practice.

You should consider of attaching event handler through on after td/a is created .

change your code to the following

function getBotsStatus() {
  $.post('/bot/status', {}).done(function(bots_status) {
    all_bots_status = bots_status['bots_status'];
    $('#bots_table').html('');
    for (var one_job in all_bots_status) {
      var text = '';
      if (all_bots_status[one_job] == 'running')
        text = '<tr><td>' + one_job + '</td><td>' + all_bots_status[one_job] + '</td><td><a >Start</a></td></tr>';
      else if (all_bots_status[one_job] == 'stopped')
        text = '<tr><td>' + one_job + '</td><td>' + all_bots_status[one_job] + '</td><td><a >Start</a></td></tr>';
      $('#bots_table').append(text);

      $("$bots_table td").on('click','a',function(){
        alert("here");
      });
    }
  }).fail(function() {
    alert('Error');
  });
}

Hope it helps

answered Dec 2, 2016 at 5:02

Geeky

7,5142 gold badges28 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rakesh K Over a year ago

Thanks for pointing out good practices, will refactor the code once I have a rough working app ready.

phobia82 · Accepted Answer · 2016-12-02 05:09:18Z

0

You are using single quotes for the onclick and for the functions parameters, making the code invalid. You rendered html looks like this: (by your code)

onclick='postStartBot('JOBID')'

resulting in an invalid code, it should use different quotes for the function and the parameters. Try this:

onclick=\'postStartBot("' + one_job + '")\'

that will render in something like

onclick='postStartBot("JOBID")'

If one_job is numeric you don't need the double quotes either

answered Dec 2, 2016 at 5:09

phobia82

1,2578 silver badges10 bronze badges

Collectives™ on Stack Overflow

Javascript function not called in a dynamically generated page

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related