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>

元素已创建，但我以后无法使用它们的 id 或带有 jquery 的类来访问它们。

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

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();
           }
       });
    });
});
于 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 回答