刪除跨度問題

我有一個食譜應用程序看起來像這樣： http://i.stack.imgur.com/FxL7R.png 刪除跨度問題

在成分範圍的末端是一個刪除按鈕。出於某種原因，我的代碼不能正常工作（這意味着它不會刪除成分跨度）：

HTML：

 <div class='formelementcontainer funky'> 
     <label for="ingredient">Ingredients</label> 
     <div id='ingredientsCOUNT' class='sortable'> 
      <span> 
       <input type="text" class='small' name="ingredient" id="ingredient" placeholder='QTY'/> 
       <select name='measurements'> 
        <option value='' name='' checked='checked'>--</option> 
        <?foreach ($measurements as $m):?> 
         <option value='<?=$m->id;?>'><?=$m->measurement;?></option> 
        <?endforeach;?> 
       </select> 
       <input type="text" name="ingredient" id="ingredient" placeholder='Ingredient'/> 
       <a class='float-right delete-button' id='deleteThis' style='margin:10px 2px;' href='#'><img src='<? echo base_url()."public/img/delete.png";?>' height='11' width='11' /></a> 
      </span> 
     </div> 
     <div class="clear"></div> 
     <div class='addSPAN tabover'> 
      <a class='float-right' id='btnAddIngredients' href='#'>Add Ingredient</a> 
     </div> 
     </div>

JQUERY：

(function($) { 
$(document).ready(function() { 
    $('#btnAddIngredients').click(function() { 
     var num = $('#ingredientsCOUNT span').length; 
     var newNum = new Number(num + 1); 
     $('#ingredientsCOUNT > span:first') 
      .clone() 
      .attr('name', 'ingredient' + newNum) 
      .appendTo('#ingredientsCOUNT') 
      .fadeIn(); 
    }); 
    $('#deleteThis').click(function() { 
     var span = $(this).closest('span'); 
     span.fadeOut('slow', function() { span.remove(); }); 
    }); 
}); 
})(jQuery);

什麼是應該發生的是，當我點擊在X上，最近的跨度（包含跨度）被移除。但是當我點擊它時，沒有任何反應。有什麼建議麼？感謝所有幫助！

編輯

這裏是一個的jsfiddle：http://jsfiddle.net/sjDk7/1/

來源

2013-03-25 Muhambi

你可以在http://jsfiddle.net/中設置它嗎？這將更容易找出問題的原因。 – andyzinsser 2013-03-25 22:40:49

你應該糾正的第一個問題是，有多個具有相同ID的元素。 ID在文檔中是唯一的。嘗試將它們重寫爲類。另外，任何被克隆的東西都應該被重新分配一個唯一的ID或者應該完全依賴於類。 – 2013-03-25 22:41:41

@andyzinsser當然，這裏：http://jsfiddle.net/sjDk7/1 – Muhambi 2013-03-25 22:46:48

這裏的問題是，要連接一個事件處理那些尚未在文檔中的元素。最簡單的辦法是委託事件處理使用on祖先元素：

$('.formelementcontainer').on('click', '.deleteThis', function() { 
    var span = $(this).closest('span'); 
    console.log(span); 
    span.fadeOut('slow', function() { 
     span.remove(); 
    }); 
});

你可以看到一個示範here。

來源

2013-03-25 22:59:08

刪除跨度問題

回答

相關問題