0

ajaxを介してデータを取得しています。すべてのデータを保持する配列があります。現在、配列をループして、配列の各要素に対応する「p」と「ボタン」を動的に作成しています。ボタンをクリックすると、対応する「p」のinnerHTMLをajaxに渡し、ボタンを非表示にする必要があります。これが私が試したもののサンプルです。

<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>

要素は作成されますが、後でjqueryでIDまたはクラスを使用してそれらにアクセスすることはできません。

4

4 に答える 4

4

問題は、要素が存在しない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();
            }
        });
    });
});

addElementまた、次のようにjQueryを使用して関数を短縮できます。

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);
}
于 2013-01-07T10:46:36.327 に答える
2

親オブジェクトまたはドキュメントでイベントを使用.onして添付します。また、オブジェクトを反復処理する必要はありません。

$(document).on("click", ".but", function(){
});
于 2013-01-07T10:46:13.083 に答える
0

thissuccessコールのコールバック内$.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();
           }
       });
    });
});
于 2013-01-07T10:49:25.187 に答える
0 
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);
}
于 2013-01-07T11:04:01.720 に答える