Question

当我使用news和add点击jQuery按钮时，我想重复我的javascript部分。它重复但重复两次。但我只想重复一次，也删除按钮不起作用我的意思是当我点击删除按钮没有动作。需要帮助的是我的代码，

HTML

<table align="center" cellpadding="0" cellspacing="0" border="0" width="600" class="test" >
     <tr>
      <td>
       <form id="formtwo" name="formone" method="post" enctype="multipart/form-data">
         <table width="100%">
           <tbody>
             <tr>
               <td><h3>News</h3></td><td><input type="text" readonly="readonly" value="1" name="newsid" id="newsletter"  /></td>
             </tr>

             <tr>
               <td>Title of news:</td>
               <td><input type="text"  name="newstitle"  /><br /><br /></td>
             </tr>

             <tr>
              <td>Description:</td>
              <td><textarea rows="5" cols="30" name="description" ></textarea><br /><br />              </td>
             </tr>

             <tr>
              <td>Title of Link:</td>
              <td><input type="text" name="titleoflink"  /><br /><br /></td>
             </tr>

             <tr>
              <td>URL of News:</td>
              <td><a href="#"><input type="text" name="urlofnews"  /><br /><br /></a></td>
             </tr>

             <tr>
              <td>News image:</td>
              <td><input type="file" name="fileToUpload" id="fileToUpload" ><br /><br />   </td>
             </tr>

             <tr>
              <td></td>
              <td align="right"><input class="add" type="button" value="Add" /><input  class="remove" type="button" value="remove" /></td>
             </tr>
           </tbody>
         </table>
       </form>
      </td>
     </tr>
  </table>

JS

$(document).ready(function(){
 $('.add').click(function() {
       $(".test").append('<table width="600" align="center"><tbody><tr><td><h3>News</h3></td><td><input type="text" readonly="readonly" value="1" name="newsid" id="newsletter"  /></td></tr><tr><td>Title of news:</td><td><input type="text"  name="newstitle"  /><br /><br /></td></tr><tr><td>Description:</td><td><textarea rows="5" cols="30" name="description" ></textarea><br /><br /></td></tr><tr><td>Title of Link:</td><td><input type="text" name="titleoflink"  /><br /><br /></td></tr><tr><td>URL of News:</td><td><a href="#"><input type="text" name="urlofnews"  /><br /><br /></a></td></tr><tr><td>News image:</td><td><input type="file" name="fileToUpload" id="fileToUpload" ><br /><br /></td></tr><tr><td></td><td align="right"><input class="add" type="button" value="Add" /><input class="remove" type="button" value="remove" /></td></tr></tbody></table>');
  });
  });
    $('.remove').click(function() {
    if($(".test tr").length != 2)
     {
        $(".test tr:last-child").remove();
     }
  else
     {
        alert("You cannot delete first row");
     }
});

Answer 1

添加到新内容时，您应该再次调用remove并添加操作。创建一个删除函数，然后调用删除函数，如下所示：

  $(document).ready(function(){
    removeAdd();
  });

function removeAdd(){
     $('.add').click(function() {
       $(".test").append('<table width="600" align="center"><tbody><tr><td><h3>News</h3></td><td><input type="text" readonly="readonly" value="1" name="newsid" id="newsletter"  /></td></tr><tr><td>Title of news:</td><td><input type="text"  name="newstitle"  /><br /><br /></td></tr><tr><td>Description:</td><td><textarea rows="5" cols="30" name="description" ></textarea><br /><br /></td></tr><tr><td>Title of Link:</td><td><input type="text" name="titleoflink"  /><br /><br /></td></tr><tr><td>URL of News:</td><td><a href="#"><input type="text" name="urlofnews"  /><br /><br /></a></td></tr><tr><td>News image:</td><td><input type="file" name="fileToUpload" id="fileToUpload" ><br /><br /></td></tr><tr><td></td><td align="right"><input class="add" type="button" value="Add" /><input class="remove" type="button" value="remove" /></td></tr></tbody></table>');
            removeAdd();
  });


    $('.remove').click(function() {
    if($(".test tr").length != 2)
     {
        $(".test tr:last-child").remove();
     }
  else
     {
        alert("You cannot delete first row");
     }
            removeAdd();
});}

JsFiddle

Answer 2

向文档添加新元素时，必须重新初始化事件处理程序。您必须重新绑定到这些事件，而不是双重绑定当前事件。你当前的代码结构带来了一个问题，可以通过一些调整来解决，这里是你的代码的JSFiddle，＆＃34;工作＆＃34;以我认为你想要的方式。

https://jsfiddle.net/zeLbswtL/

var tableString = "...";
function setupHandlers() {
  $('.add').unbind();
  $('.remove').unbind();
  $('.add').click(function() {
      $(".test").last().after(tableString);
      setupHandlers();
  }
  $('.remove').click(function() {
      if($(".test").length > 1)
      {
          $(this).closest('table').remove();
      }
      else
      {
          alert("You cannot delete first row");
      }
 });
}
$(document).ready(function(){
    setupHandlers();
});

您仍会遇到表单ID问题并在表单中粘贴表单，您可能需要重新构建某些内容。随时可以提出其他问题。

单击ADD按钮

2 个答案: