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');
            });
        }

Answer 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

Answer 2

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

Javascript function not called in a dynamically generated page

2 个答案: