製作由Javascript點擊呈現

我對web開發和AJAX很陌生，我在那裏面臨一個小問題。基本上，我在我的網頁上有一個表格。當我提交這個表單時，它會向我的控制器發送一個AJAX調用，將我想要的數據發回給我，並更改頁面的html內容。製作由Javascript點擊呈現

JS代碼：

$(document).ready(function() { 

    $("#mydiv table tbody td").click(function() { 
     alert("You clicked my <td>!" + $(this).html() + 
       "My TR is:" + $(this).parent("tr").html()); 
    }); 



    $('#myform').submit(function() 
    { 
     try { 
      var host = $("#host").val(); 
      var port = $("#port").val(); 
      var username = $("#username").val(); 
      var password = $("#password").val(); 
      var database = $("#database").val(); 

      $.ajax({ 
       type: "POST", 
       url: "/management/connectDatabase", 
       dataType: "JSON", 
       data: "host="+host+"&port="+port+"&username="+username+"&password="+password+"&database="+database, 
       cache: false, 
       success: 
        function(data){ 
         $('#mydiv').html(show_tables(data)); 
        }, 
      }); 
      return false; 
     } 

     catch(e){ 
      console.debug(e); 
     } 
    }); 
}); 

function show_tables(data) 
{ 
    var html = '<div id="mydiv">'; 

    html += '<table class="display" id="example">'; 
    html += '<thead><tr><th>Tables</th></tr></thead><tbody>'; 
    for (var tablesCount = 0; tablesCount < data.tables.length; tablesCount++){ 
     html += '<tr class=gradeA id="trtest">'; 
     html += '<td id="tdtest">' + data.tables[tablesCount] + '</td>'; 
     html += '</tr>'; 
    } 
    html += '</tbody></table>'; 

    html += '</div>'; 
    return html; 
}

當我提交表單，將HTML生成正確的，我可以看到我的內容。但是，我無法點擊<table>的任何條目。而且，當我想看到我的頁面的源代碼時，它不會顯示錶格，但仍然是我的表格，即使它仍然被驗證。

有人能解釋我在這裏做錯了嗎？

來源

2012-10-02 Billy McNuggets

瀏覽器的查看源選項顯示，因爲它是下載的代碼。使用內置的開發人員工具（IE/Chrome中的F12，我也相信Safari; Opera中的Ctrl + Shift + I），或者如果您使用的是Firefox，我會推薦[Firebug]（http://getfirebug.com）（F12鍵也可以）查看和編輯渲染的[DOM]（https://developer.mozilla.org/docs/DOM）。 – user2428118

感謝您的提示！ –

不客氣。順便說一下，如果您希望查看當前呈現的文檔的HTML源代碼（有時可能會派上用場），我會推薦[Web Developer]（http://chrispederick.com/work/web-開發商/）。 – user2428118

根據您使用的是哪個jQuery版本，您需要使用jQuery.delegate或jQuery.on綁定單擊事件，以便使用動態添加的DOM元素工作。

編輯：正如Geert Jaminon指出的那樣，您必須使用on函數的selector參數。這對我有用。

$("#mydiv table tbody").on('click', 'td', function() { 
    alert("You clicked my <td>!" + $(this).html() + 
      "My TR is:" + $(this).parent("tr").html()); 
});

來源

2012-10-02 09:37:12

似乎不適用於我的情況。我改變了有關代碼的部分，以適應你告訴我的情況，並且行爲顯然保持不變。 –

嘗試使用'.live'而不是'.on'，它具有相同的妝容 – Luuky19

您使用的是哪個版本的jQuery？ –

如果您動態插入數據，則需要在插入數據後添加點擊事件。

http://codepen.io/thomassnielsen/pen/FEKDg

$.post('ajax/test.html', function(data) { 
    $('.result').html(data); 
    // Add .click code here 
});

來源

2012-10-02 09:40:48 thomassnielsen

但在我的情況下，由於生成html內容的代碼是在ajax調用中，所以我不知道如何創建它。 –

只需在ajax調用返回函數（更新後的答案） – thomassnielsen

你所需要的元素的表現後，單擊事件處理程序綁定，因爲他們不到位，當你做出的綁定。

來源

2012-10-02 09:42:11

$("#mydiv table tbody").on('click', 'td', function() { 
    alert("You clicked my <td>!" + $(this).html() + "My TR is:" + $(this).parent("tr").html()); 
});

.live（）在更新的jQuery版本中被替換爲.on（）。

http://jsfiddle.net/ZqYgv/

來源

2012-10-02 09:55:14 Geert

'中調用.click（）函數。在這裏仍然不適合我。 –

製作​​由Javascript點擊呈現

回答

相關問題

製作由Javascript點擊呈現