jquery不會刪除div

我有添加一些動態操作的窗體。我有一張表，其中我有申請人申請的職位。有一個offer offer按鈕，當他們點擊offer按鈕時，我想插入要提交和更新的offer字段。我可以得到要插入的域，但是當我點擊取消事務按鈕時，我無法讓它清空構建窗體的div addapptrans。以下是代碼。我知道這一定是我失蹤的簡單事情。jquery不會刪除div

<head> 
<script type="text/javascript"> 

    $(function(){ 
     $(".offerposition").click(function(){ 
      var row = $(this).closest('tr').find('td:nth-child(1)').text(); 

      alert('You clicked on ' +row); 
      $("#addapptrans").empty(); 
      $("#addapptrans").append(
       $("<input>").attr('type','hidden').attr('value',row).attr('Name','Mchposid')) 
      .append(
       $("<input>").attr('type','submit').attr('value','Complete Offer').attr('id','completeoffertrx').attr('name','completeoffertrx').addClass("buttonlarge buttonmargin") 
      ).append(
       $("<input>").attr('type','button').attr('value','Cancel Transaction').attr('id','canceloffertrx').attr('name','canceloffertrx').addClass("buttonlarge buttonmargin") 
      ); 

     } 
     ) 
    } 
    ); 

    $(function(){ 
     $("#canceloffertrx").click(function(){ 
     $("#addapptrans").empty(); 

     }) 
    }) 
</script> 
</head> 
<body> 

<form > 

    <div id="addapptrans"></div> 
    <p class="posttitle">Positions applied For</p> 
    <table class="tabpositions"> 

     <tbody> 
     <tr> 
      <th class="position">Position</th> 
      <th class="department">Department</th> 
      <th class="dateapp">Date Applied</th> 
      <th class="appdate">Offer?</th> 
     </tr> 

     <tr> 
      <td style="display: none;">2281</td> 
      <td>Building Service Worker - Part time</td> 
      <td>Environmental Services</td> 
      <td>08/13/2001</td> 
      <td><input type="button" class="offerposition" value="Offer Position"></td> 
     </tr>     
     </tbody> 
    </table> 

</form>

來源

2014-10-28 user1554967

你能提供一個小提琴嗎？ – GSaunders 2014-10-28 17:40:16

這這裏代碼：#canceloffertrx前

$(function(){ 
    $("#canceloffertrx").click(function(){ 
     $("#addapptrans").empty(); 
    }) 
})

奔跑存在在頁面上。因此，$("#canceloffertrx").click(fn)在頁面上匹配零個元素，並將點擊處理程序綁定到它們的全部零。

您可以通過將點擊處理程序綁定到文檔或存在的最接近的父級來解決此問題。

$('#addapptrans').on('click', '#canceloffertrx', function(){

這就是說，當元素#addapptrans接收匹配選擇#canceloffertrx是實際點擊一個一個點擊事件，和元素，觸發事件處理函數。

或者通過在創建按鈕時綁定點擊處理程序。

$("<input>") 
    .attr('type','submit') 
    .attr('value','Complete Offer') 
    .attr('id','completeoffertrx') 
    .attr('name','completeoffertrx') 
    .addClass("buttonlarge buttonmargin") 
    .click(function() { ... });

最後，一些樣式建議:)特別是鏈接jQuery方法時，你可以把這使得它更具可讀性它自己的行中的每個電話。

而且您還應該知道attr()可以接受一個對象作爲參數，只需調用一次即可設置許多屬性。

$("<input>") 
    .attr({ 
    type: 'submit', 
    value: 'Complete Offer', 
    id: 'completeoffertrx', 
    name: 'completeoffertrx' 
    }) 
    .addClass("buttonlarge buttonmargin") 
    .click(function() { ... });

來源

2014-10-28 17:40:45

最好將委派的事件處理程序附加到最近的不變祖先元素（例如，在這個問題中'＃addapptrans'）。如果沒有更近的話，「文件」就是後備。 – 2014-10-28 17:43:06

您的解決方案http://jsfiddle.net/jn7jh3bm/ – jbyrne2007 2014-10-28 17:44:12

注意並更正！ :) – 2014-10-28 17:44:16

jquery不會刪除div

回答

相關問題