在動態生成的頁面中未調用Javascript函數

我有一個Web應用程序，其中基於對AJAX調用的響應生成一些HTML內容。在HTML中，我創建了一些鏈接，將onclick（）事件連接到同一頁面中的另一個Javascript函數。但是當頁面加載並且在最終呈現的HTML輸出中生成鏈接時，單擊鏈接不會調用綁定的Javascript函數。我在這裏做錯了什麼？有人可以幫我解決這個問題嗎？在動態生成的頁面中未調用Javascript函數

這裏的JavaScript功能生成的HTML代碼：

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

來源

2016-12-02 Rakesh K

而不是添加的onclick對TD的，您可以將事件通過javascript/jQuery使用$（document）.on（'click'，'td'，function（）{}）處理程序。 – Geeky

您正在使用的onclick和功能參數單引號，使得代碼無效。您呈現的HTML看起來像這樣：（您的代碼）

onclick='postStartBot('JOBID')'

從而導致無效代碼，它應該在功能和參數，使用不同的報價。試試這個：

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

將在渲染的東西像

onclick='postStartBot("JOBID")'

如果one_job是數字你不需要雙引號或者

來源

2016-12-02 05:09:18 phobia82

上的href的標籤添加點擊處理程序是一個不好的做法。

在創建td/a之後，您應該考慮通過on附加事件處理程序。

改變你的代碼如下

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

希望它可以幫助

來源

2016-12-02 05:02:54 Geeky

感謝您指出良好的做法，一旦我有一個粗略的工作應用程序準備就會重構代碼。 –

在動態生成的頁面中未調用Javascript函數

回答

相關問題