Jquery的所附輸入按鈕不與功能。對（點擊）

Question

的jsfiddle的我的代碼：http://jsfiddle.net/8Vcyu/

我有安裝形式，其中用戶可以在1個10行的信息之間的輸入。如果用戶添加第10行jquery刪除「添加行」按鈕。如果第十行被刪除，則添加按鈕返回。這一切都很好，但是當'add row'按鈕被追回到頁面時，它不再起作用 - 不會添加新行。任何幫助真的很感激，這個問題困擾着我。

HTML

<form name="input" action="/engine/preview.php" enctype="multipart/form-data" id="customizeForm" method="post"> 
    <div id="customize_container"> 
     <div id="customize_right"> 
       <table class="customize_table"> 
        <tr class="tr_clone"> 
         <td> 
          <input type="text" name="title[]" value="NAME" maxlength="12" /> 
         </td> 
         <td> 
          <input type="text" name="entry[]" value="Your Name" maxlength="20" /> 
         </td> 
         <td> 
          <a href="#" class="closeRow"></a> 
         </td> 
        </tr> 
        <tr class="tr_clone"> 
         <td> 
          <input type="text" name="title[]" value="NAME" maxlength="12" /> 
         </td> 
         <td> 
          <input type="text" name="entry[]" value="Your NAME" maxlength="20" /> 
         </td> 
         <td> 
          <a href="#" class="closeRow">remove</a> 
         </td> 
        </tr> 
        <tr class="tr_clone"> 
         <td> 
          <input type="text" name="title[]" value="NAME" maxlength="12" /> 
         </td> 
         <td> 
          <input type="text" name="entry[]" value="Your ID" maxlength="20" /> 
         </td> 
         <td> 
          <a href="#" class="closeRow">remove</a> 
         </td> 
        </tr> 
        <tr class="tr_clone"> 
         <td> 
          <input type="text" name="title[]" value="NAME" maxlength="12" /> 
         </td> 
         <td> 
          <input type="text" name="entry[]" value="Your Account Name" maxlength="20" /> 
         </td> 
         <td> 
          <a href="#" class="closeRow">remove</a> 
         </td> 
        </tr> 
        <tr class="tr_clone"> 
         <td> 
          <input type="text" name="title[]" value="LABEL" maxlength="12" /> 
         </td> 
         <td> 
          <input type="text" name="entry[]" value="Information" maxlength="20" /> 
         </td> 
         <td> 
          <a href="#" class="closeRow">remove</a> 
         </td> 
        </tr> 
       </table> 
       <div id="add_row_button"> 
        <input type="button" name="add" value="Add" class="tr_clone_add" /> 
       </div> 
     </div> 
     <div class="clear"></div> 
     <input type="submit" value="Preview Your Card" class="preview_cards" /> 
    </div> 
    </form> 

JS

function countRows() { 
    return $(".customize_table tr").length; 
} 

$(".closeRow").on('click', function() { 
    $(this).closest('tr').remove(); 
    var $rows = countRows(); 
    if($rows == 9) { 
     $("#add_row_button").append("<input type='button' name='add' value='Add' class='tr_clone_ad' />"); 
    } 
}); 

$("input.tr_clone_add").on('click', function() { 
    var $rows = countRows(); 
    if($rows <= 9) { 
     var $tr = $("table.customize_table tr:last-child"); 
     var $clone = $tr.clone(true); 
     $tr.after($clone); 
     $rows = countRows(); 
     if($rows == 10) { 
      $(".tr_clone_add").remove() 
     } 
    } 
}); 

$(document).ready(function() { 
    $("#customizeForm").ajaxForm({ 
     success: function(responseText){ 
      $.fancybox({ 
       'content' : responseText, 
       'minWidth' : 800, 
       'minHeight' : 600, 
       'scrolling' : 'no', 
       'type' : 'iframe', 
      }); 
     } 
    }); 
}); 

Answer 1

你應該（）使用委託方法 -

$('body').on('click', 'input.tr_clone_add', function(){... 

Answer 2

兩件事情：我創建了一個功能負責綁定t他點擊按鈕，並將其添加到$(document).ready()，並且還點擊了Remove按鈕。

function bindAddButton() 
{ 
    $("input.tr_clone_add").on('click', function() { 
     var $rows = countRows(); 
     if($rows <= 9) { 
      var $tr = $("table.customize_table tr:last-child"); 
      var $clone = $tr.clone(true); 
      $tr.after($clone); 
      $rows = countRows(); 
      if($rows == 10) { 
       $(".tr_clone_add").remove() 
      } 
     } 
    }); 
} 

另外，我注意到，當你在按鈕的類名重新添加按鈕，你缺少一個「d」：

$("#add_row_button").append("<input type='button' name='add' value='Add' class='tr_clone_ad' />"); 

這是使代碼失敗。

這裏是一個的jsfiddle：

http://jsfiddle.net/8Vcyu/15/