當文檔準備好和文檔更改時應該初始化jquery函數的語法是什麼？

Question

背景是：我有一個可編輯的表格，其中添加了一個新行。我也有與啓動兩個功能：

$（函數（）{

這些功能讓用戶編輯線路和用戶還可以將滴東西成表，但只有它適用於普通行，而不是最近添加的行，即使它們與所有其他行都具有相同的類。是否可以修改函數以便它們可以用於新添加的行？如果是 - 如何執行？還是另一個問題？

Regards

編輯： 這裏是我的，增加了一個錶行按鈕代碼：

$(function() { 
    $("#editableTable").on('click', 'input.addButton', function() { 

      var nexttr = $(this).closest('tr'); 
      $(nexttr).next().before('\n<tr class=\"sortable-row ui-droppable\">\n<td>entry 1</td>\n<td>entry 2</td>\n<td>entry 2</td>\n<td>entry 4</td>\n<td>entry 5</td>\n<td>entry 6 </td>\n<td>entry 7</td>\n<td>entry 8</td>\n<td><input type=\'button\' class=\'addButton\' value=\'add row\' /></td>\n<td><input type=\'button\' class=\'deleteButton\' value=\'delete row\' /></td>\n</tr>\n'); 
      oddRowColor(); //changes color in every second row 
    }); 
}); 

，使TD-元素可編輯的代碼是這樣的：

$(function() { 
$("td").dblclick(function() { 
    var OriginalContent = $(this).text(); 

    $(this).addClass("cellEditing"); 
    $(this).html("<input type='text' id='textinput' size='100' value='" + OriginalContent + "' />"); 
    $(this).children().first().focus(); 

    $(this).children().first().keypress(function (e) { 
     if (e.which == 13) { 
      var newContent = $(this).val(); 
      $(this).parent().text(newContent); 
      $(".cellEditing").removeClass("cellEditing"); 
     } 
    }); 

    $(this).children().first().blur(function (e) { 
     $(this).parent().text(OriginalContent); 
     $(".cellEditing").removeClass("cellEditing"); 

    }); 
}); 
}); 

Answer 1

按照我的意見，試試這個解決方案。也許這需要一些調整，因爲你不發表您的HTML標記：

$(function() { 
    $("#editableTable").delegate('input.addButton', 'click', function() { 
     var nexttr = $(this).closest('tr'); 
     var newtr = $('<tr />', { class: 'sortable-row ui-droppable' }); 

     for (var i = 1; i <= 8; i++) { 
      var newtd = $('<td />').html('entry ' + i.toString()); 
      newtr.append($(newtd)); 
     } 

     var newtdaddbutton = $('<td />'); 
     var newaddbutton = $('<button />', { class: 'addButton' }).html('add row'); 
     newtdaddbutton.append($(newaddbutton)); 
     newtr.append($(newtdaddbutton)); 

     var newtddelbutton = $('<td />');  
     var newdelbutton = $('<button />', { class: 'deleteButton' }).html('delete row'); 
     newtddelbutton.append($(newdelbutton)); 
     newtr.append($(newtddelbutton)); 

     $(nexttr).next().before($(newtr)); 

     oddRowColor(); //changes color in every second row 
    }); 

    $("#editableTable").delegate('td', 'dblclick', function() { 
     var OriginalContent = $(this).text(); 

     $(this).addClass("cellEditing"); 
     var textinput = $('<input />', { type: 'text', id: 'textinput', size: 100, value: OriginalContent }); 
     $(this).html($(textinput)); 
     $(this).children().first().focus(); 

     $(this).children().first().keypress(function (e) { 
      if (e.which == 13) { 
       var newContent = $(this).val(); 
       $(this).parent().text(newContent); 
       $(".cellEditing").removeClass("cellEditing"); 
      } 
     }); 

     $(this).children().first().blur(function (e) { 
      $(this).parent().text(OriginalContent); 
      $(".cellEditing").removeClass("cellEditing"); 
     }); 
    }); 
}); 

Answer 2

如果您對文檔設置監聽器準備好了，當你添加新行時，它們不受影響。

當您單擊添加行時，您必須在行上添加偵聽器。

//Start function on ready 
$(function() { 

$('.rowClass').draggable().click(function(){ 
//your code here 
}); 


$('btnAdd').click(function(){ 
//add new row code 
var newRow = $('<tr class="rowClass">'); 
newRow.draggable().click(function(){ 
//the same code here 
}); 


}); 

}); 

我不知道你是如何製作表格，但邏輯在那裏，再見。