2011-02-14 95 views
1

我在一个奇怪的情况堆栈。 而我无法从逻辑上解决它。jQuery - AJAX |两个ajax在同一页上张贴| POST-POST问题/问题

问题: (都无需刷新页面做!):

  • jQuery让一个AJAX POST到服务器上添加内容到数据库中。 (写的东西。)...(和它的作品!)
  • 现在会显示该元素(并有一个删除按钮)
  • 现在,如果我点击这个元素将其删除(使一个新的jQuery AJAX POST )...
  • 没有任何反应

是AJAX具有限制或我要检查/重新编辑/学到东西?

Firebug返回新元素并检查它 - 我应该能够在创建它时删除它。 (删除只有在我刷新页面后才起作用。)

请帮忙!

编辑1: LINK DELETED。

EDIT.2:这里是老(勘误表)代码: (全是 '文件准备好' 功能)

//////////// COMMON: $('。list> *')。addClass('delete'); var valDel = 0; $('。delete')。attr('value',function(){valDel ++; return + valDel;});

/////////////// WRITE: 

$(function() { 
    $("form.form #submit_btn").click(function() { 

    //SOMETHING ON CLICK....+ 

     var name = $('#name').val(); 
     var comment = $('#comment').val(); 
     var email = $('#email').val(); 

     var i = 0; 
    $.ajax({ 
     type: "POST", 
     data: "ime="+ime+"&komentar="+komentar+"&email="+email, 
     cache: false, 
     success: function(){ 

     //SOMETHING ON SUCCESS....+ 

      $('.list >*').addClass('delete'); 
      $('.delete').attr('value', function() {i++; return ''+i;}); // FIX: add again incremented values 

     } 
    }); 
    return false; 
    }); 
}); 
/////////////////////// DELETE: 


$(function() { 
    $(".delete").click(function() { // THE FIX: ...).live('click', function(){... 
     $(this).addClass('toBeDeleted'); 
     var valx = $(this).attr("value"); 
     var string = 'valx='+ valx; 

     $.ajax({ 
      type: "POST", 
      data: string, 
      cache: false, 
      success: function(){ 

      $('.toBeDeleted').hide(function() { 
       $(this).remove(); 
       var reValDel = 0;$('.list >*').attr('value', function() {reValDel++; return +reValDel;}); 
      }); 

      } 
     }); 
     return false; 
    }); 
}); 
+2

显示您的代码缩小版本说明并允许我们重现问题而不是链接到某个站点。你真的希望有人对你的网站进行反向工程以找到你的错误吗?我不会。 – 2011-02-14 21:37:22

+0

你可以在萤火虫中使用网络面板来自行调试这个 – soju 2011-02-14 21:43:19

+0

@Darin:我欣赏你的批评Darin,我的代码很好,我想给出一个想法,而不是rev​​-engineering'view source''因为这几乎是不可能的;)我保证在解决方案作为回复后很快发布我的代码。|||谢谢@soju我会试试看! – 2011-02-14 21:54:28

回答

7

我怀疑当你创建一个新项目后动态添加dom元素时,不会添加点击事件处理程序。您应该使用jQuery的“实时”功能将点击事件绑定到元素。

翻翻你的源,它看起来像你应该改变这样的:

$(".delete").click(function() {... 

这个

$(".delete").live("click", function() {... 
+0

好主意!我正在为改变而前进!谢谢!我会让你知道的 – 2011-02-14 21:47:42

+0

就是这样!提供.live'点击'功能解决了问题!现在删除工作后,无需刷新张贴!感谢rcravens! – 2011-02-14 22:00:32

0

你试图使用.click()功能刚刚通过你的第一个Ajax调用添加到DOM元素吗?

+0

是的!感谢您的回复!我使用了@rcravens解决方案.live。现在效果很好!活跃并等待:D – 2011-02-14 22:42:29

1

你是如何click事件绑定到按钮?如果你没有使用jquery live函数,你需要重新绑定click事件。实时事件会将点击处理程序绑定到页面上所有现有和将来的元素。 http://api.jquery.com/live/

1

我可以从您的代码中看到,您只需拨打$(".delete").click(function() {...});一次。当您使用像$(".delete")这样的选择器时,您将获得一组匹配对象。如果添加新的匹配对象,则必须再次运行$(".delete").click(function() {...});以更新绑定的对象集合click()事件...或者你可以听其他人,并使用.live()

jQuery live()

这种方法是用于连接 事件处理元素在 基本.bind()方法的变化。当调用 .bind()时,jQuery对象引用的元素获取 附加的处理程序;得到 后面介绍的元素不要,所以他们会 需要另一个.bind()调用。对于 例如,考虑HTML:

<body> 
    <div class="clickme"> 
    Click here 
    </div> 
</body> 

为了一个简单的点击处理程序绑定到这个 元素:

$('.clickme').bind('click', function() { 
    // Bound handler called. 
}); 

当点击元素时, 处理器叫做。然而,假设 在此之后,另一个元素是 补充说:

$('body').append('<div class="clickme">Another target</div>'); 

这个新元素也匹配 选择.clickme,但由于呼叫后,这是 加入到.bind() , 点击它将无能为力。

.live()方法提供了一个 替代此行为。使用这种方法绑定 一个单击处理目标元素 :

$('.clickme').live('click', function() { 
    // Live handler called. 
}); 

再后来添加了新的元素:

$('body').append('<div class="clickme">Another target</div>'); 

在新然后点击元素也会触发处理程序。

为了从使用.live(绑定的所有拆散的点击处理程序),使用.die()方法:

$('.clickme').die('click'); 
1

你可以使用.live().delegate()以达到预期的效果。 delegate是处理这种事情的一种非常棒的方式,因为它减少了页面上事件监听器的活动数量。