jQuery管理表數據

我得到一些錯誤，試圖管理表數據（與可用的語言）。以下是我有：jQuery管理表數據

HTML：

<input type="button" id="add_language" value="Add Language" /> 
    <table> 
     <tbody id="languages"> 
              <tr> 
          <td><div class="input text"><input type="text" id="Setting3Value3Language" rel="" value="English" name="data[Setting][3][value][3][language]"/></div></td> 
          <td><div class="input text"><input type="text" id="Setting3Value3Alias" rel="" value="eng" name="data[Setting][3][value][3][alias]"/></div></td> 
          <td/> 
          <td><button class="delete-lang">Delete</button></td> 
         </tr> 
     </tbody> 
    </table>

和jQuery：

$("#add_language").click(function(){ 
    var langId = langId + 1; 
    var row ='<tr><td><div class="input text"><input type="text" id="Setting3Value'+langId+'Language" rel="" value="" name="data[Setting][3][value]['+langId+'][language]"/></div></td><td><div class="input text"><input type="text" id="Setting3Value'+langId+'Alias" rel="" value="" name="data[Setting][3][value]['+langId+'][alias]"/></div></td><td></td><td><button class="delete-lang ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" role="button" aria-disabled="false" title="Delete"><span class="ui-button-icon-primary ui-icon ui-icon-trash"/><span class="ui-button-text">Delete</span></button></td></tr>'; 
    $('#languages').append(row); 
    return false; 
}); 

$(".delete-lang").button({ 
      icons: { 
       primary: "ui-icon-trash" 
      }, 
      text: false 
     }); 

$(".delete-lang").click(function(event){ 
    event.preventDefault(); 
    $(this).parents('tr').first().remove(); 
});

因爲這是工作，除了爲刪除按鈕的時刻 - 刪除行，只是一直在插入我得到表單submited，它不運行event.preventDefault();爲新添加的行並提交表單。如何解決這個問題？

另外，我應該添加某種排序行，但也排序他們name輸入值應該改變。如何使sortable事件更改輸入名稱？

我不確定這是管理表格中數據的最佳方式，但如果有更好更簡單的方法 - 請提出建議。

來源

2012-02-25 Constantin.FF

對於動態添加的行（即，在頁面加載時不可用於DOM），您需要將事件委託給靜態父元素。如果您使用jQuery 1.6或更高版本，則使用delegate(),1.7或更高版本，則使用on()。

試試這個：

$("#languages").delegate(".delete-lang", "click", function(event) { 
    event.preventDefault(); 
    $(this).parents('tr').first().remove(); 
});

或jQ1.7：

$("#languages").on("click", ".delete-lang", function(event) { 
    // rest of your code....

這是假設在代碼中tbody#languages元素沒有通過jQuery追加。如果是，請嘗試使用其他選擇器。

來源

2012-02-25 11:14:23

+1：我在這裏學到了一些新東西。 – 2012-02-25 11:22:25

感謝Rory的委託功能。它將在未來幫助我。

Constantin.FF。看看這個問題，如果它可以幫助你。我想避免使用Live功能，所以我做了一些與已經接受的建議不同的事情。 Bind a click to a dynamic button with jQuery?

來源

2012-02-25 11:20:36

jQuery管理表數據

回答

相關問題