Question

我陷入了一种奇怪的境地。我无法从逻辑上解决它。

问题：（所有这些都必须在没有页面刷新的情况下完成！）：

jQuery向服务器发出AJAX POST，以向数据库添加内容。（写点东西。）......（它有效！）
现在显示该元素（并有一个删除按钮）
现在，如果我点击这个元素删除它（制作一个新的jQuery AJAX POST）......
没有任何反应

AJAX是否有限制或我必须检查/重新编辑/学习一些东西？

Firebug返回该新元素并检查它 - 我应该能够在创建它时将其删除。（删除仅在我进行页面刷新后才起作用。）

请帮忙！

EDIT.1： LINK DELETED。

EDIT.2：这里是旧的（勘误）代码：（全部是'文件准备'功能）

//////////// COMMON： $（'。list＆gt; *'）。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;
    });
});

Answer 1

我怀疑在创建新项目后动态添加dom元素时，不会添加click事件处理程序。您应该使用jQuery'live'功能将click事件绑定到元素。

查看您的来源，您似乎应该更改此内容：

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

到这个

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

Answer 2

如何将click事件绑定到按钮？如果您没有使用jquery live函数，则需要重新绑定click事件。直播活动会将点击处理程序绑定到页面上的所有现有和未来元素。 http://api.jquery.com/live/

Answer 3

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

jQuery live()

这种方法是一种变体附加的基本.bind（）方法元素的事件处理程序。什么时候调用.bind（），即元素 jQuery对象指的是获取处理程序;获得的元素后来介绍没有，所以他们会需要另一个.bind（）调用。对于例如，考虑HTML：

.live()

将简单的单击处理程序绑定到此处元素：

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

单击元素时，处理程序被调用。但是，假设在此之后，另一个因素是加入：

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

这个新元素也匹配   选择器.clickme，但从那以后   在调用.bind（）后添加，   点击它就什么都不做。

.live（）方法提供了一个   替代这种行为。绑定   目标元素的单击处理程序   使用这种方法：

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

然后添加一个新元素：

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

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

要解除所有使用.live（）绑定的点击处理程序，请使用.die（）方法：

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

Answer 4

您可以使用.live()或.delegate()来达到预期的效果。 delegate是处理此类事情的非常棒的方法，因为它减少了页面上事件侦听器的活动数量。

Answer 5

您是否尝试在刚刚通过第一次Ajax调用添加到DOM的元素上使用.click()函数？

jQuery - AJAX |同一页上的两个ajax帖子| After-POST问题/问题

5 个答案: