用jquery隱藏動態創建的元素

Question

我通過ajax獲取數據。我有一個數組保存所有數據。現在我正在運行一個循環遍歷數組並動態創建一個對應於每個對象的'p'和'按鈕'在array.If的元素我按一下按鈕對應的「p」的innerHTML應該傳遞給Ajax和按鈕必須disappear.Here是什麼，我試圖樣本：

<script> 
for(var i=0;i<foo.length;i++) 
{ 
    addElement(foo[i],i); 
} 
function addElement(foo,i) 
{ 
    ni=document.getElementById("asdf"); 
    new_but=document.createElement('input'); 
    new_p=document.createElement('p'); 
    new_p.id='text'+toString(i); 
    new_p.innerHTML=foo; 
    new_but.type='button'; 
    new_but.value='add'; 
    new_but.id=toString(i); 
    new_but.className='but'; 
    ni.appendChild(new_p); 
    ni.appendChild(new_but); 
} 
$(document).ready(function(){ 
    $('.but').each(function(){ 
     $(this).click(function(){ 
      $.ajax({ 
       type:'POST', 
       data:'awdwad', 
       url:'aadwewq.php', 
       success:function(result) 
       { 
        if(result==no_error) 
        $(this).hide(); 
       } 
});});});}); 
</script> 

的元素創建的，但我我以後無法使用他們的ID或帶有jQuery的類訪問它們。

Answer 1

的問題是，因爲click處理程序被分配的onload，當.but元件不存在。您需要單擊處理程序委託給這樣的父元素：

$(document).ready(function(){ 
    $('#asdf').on('click', '.but', function(){ 
     $.ajax({ 
      type:'POST', 
      data:'awdwad', 
      url:'aadwewq.php', 
      success:function(result) { 
       if (result == no_error) 
        $(this).hide(); 
      } 
     }); 
    }); 
}); 

此外，您還可以使用jQuery這樣縮短addElement功能：

function addElement(foo, i) { 
    var $ni = $('#asdf'); 
    var $p = $('<p></p>', { 'id', 'text' + toString(i) }).html(foo).appendTo($ni); 
    var $button = $('<input></input>', { 
     'type': 'button', 
     'id': toString(i), 
     'class': 'but' 
    }).appendTo($ni); 
} 

Answer 2

使用.on並在某些父對象或文檔上附加事件。也不需要迭代對象。

$(document).on("click", ".but", function(){ 
}); 

Answer 3

this您success回調您$.ajax呼叫內指的是ajax調用本身。 您應該首先參考按鈕。

隨着其他答案的反饋相結合：

$(function() { 
    $(document).on('click', '.but', function() { 
     var btn = $(this); 
     $.ajax({ 
      type:'POST', 
      data:'awdwad', 
      url:'aadwewq.php', 
      success:function(result) 
      { 
       if(result==no_error) 
       $(btn).hide(); 
      } 
     }); 
    }); 
}); 

Answer 4

function addElement(foo,i){ 
    ni=document.getElementById("asdf"); 
    new_but=document.createElement('input'); 
    new_p=document.createElement('p'); 
    new_p.id='text'+i; //remove toString 
    new_p.innerHTML=foo; 
    new_but.type='button'; 
    new_but.value='add'; 
    new_but.id=i; // remove toString 
    new_but.className='but'; 
    ni.appendChild(new_p); 
    ni.appendChild(new_but); 
}