2014-03-26 91 views
1

所以下面的代碼可以生成我的表格,但只要我註釋掉'ABT'的東西,頁面就會繪製,但事件處理程序都不起作用。動態jQuery頁面問題

我有一個愚蠢的語法錯誤嗎?或者我會不正確地生成此頁面?也許我以錯誤的順序追加事物?

我對所有網絡的東西都很新,所以對動態頁面生成的任何建議也將非常感激。

與此相伴的html非常少。真的只有js和css源代碼鏈接和一個空的主體。

$(document).ready(function() { 

    var title = 'Page Title'; 
    var form = $('<form></form>').attr('id', 'form1'); 
    var div  = $('<div></div>').attr('id', 'hasTable'); 
    var ABT  = $('<div></div>').attr('id', 'ABTHolder'); 
    var table = $('<table></table>').attr('id', 'CETable'); 
    var head = $('<thead></thead>'); 
    var tbody = $('<tbody></tbody>'); 
    var headRow = $('<tr></tr>'); 

    document.title = title; 

    $('body').append(form); 
    form.append(div); 
    div.append(table); 

    //$('body').append(ABT); 
    //ABT.append("<input type='button' id='ABTbtn' value='Activate Bypass Timer'/>").button(); 

    //Create column headers 
    table.append(head); 
    head.append(headRow); 
    for(var i=0; i < $headers1.length; ++i) 
     { 
     var r1 = $('<th></th>').addClass('r90'); 
     var sp = $('<span></span>').text($headers1[i]); 
     if(i > 5) 
      { 
      r1.addClass('borderCell2').attr('id', 'th' + i); 
      } 
     r1.append(sp); 
     headRow.append(r1); 
     } 

    //Create default row (i.e. alternative way to create column headers) 
    var tr = $('<tr></tr>').attr('id', 'tr0'); 
    table.append(tbody); 
    tbody.append(tr); 
    for(var i=0; i < $headers2.length; ++i) 
     { 
     var td = $('<td></td>').addClass('borderCell2').text($headers2[i]); 
     if(i < 7) 
      { 
      td.attr('id', 'th' + i) 
      } 
     tr.append(td); 
     } 

    $allCells = $("td, th"); 
    $('#CETable tr').addClass("whiteRow"); 
    $('#CETable tbody td') 
    .on("click", function() { 
     $cell = $(this); 
     populateVars($(this)); 

     alert("ID: " + $trow.find("td:first").text() + " , Value: " + $cell.text() + ", Header: " + $thid.text()); 
    }) 
    .mouseover(function() { 
     $cell = $(this); 
     populateVars($(this)); 

     //Highlight Row 
     highlightRow($trid); 

     //Highligh Column 
     highlightColumn($cell) 
    }) 
    .mouseout(function() { 
     $cell = $(this); 
     populateVars($(this)); 

     //Un-highligh row 
     unHighlightRow($trid) 

     //Un-highlight column 
     unHighlightColumn(); 
    }); 

// $('#ABTbtn').on("click", function(){ 
//  alert('ABT!'); 
// });   
}); 

編輯:我測試了它只是附加AB​​THolder股利和離開按鈕,一切工作正常。我可以點擊td和ABTHolder div。

如何添加按鈕打破它?

+0

ABT的東西?沒有得到那 – Andy897

+0

@ Andy897最後幾行代碼。 – Scimonster

+0

這些被註釋掉 – Andy897

回答

0

您應先創建按鈕,然後將其追加,然後單擊按鈕對象。

現在你只是試圖點擊ABT對象。