jQuery - AJAX | Two ajax post on same page | After-POST problem/question_问答_开发者

I'm stack on a strange situation. And I can't resolve it logically.

The problem: (all have to be done without page refresh!):

jQuery makes an AJAX POST to the server to add a content to the database. (Write something.)...(and it works!)
Now that element is displayed (and have a delete button)
Now if I click on THIS element to delete it (making a new jQuery AJAX POST)...
nothing happens

Is AJAX that have restrictions or I have to check/re-edit/learn something?

Firebug returns that new element, and inspecting it - I should be able to delete it as I created it. (The delete works only after I make a page-refresh.)

Please help!

EDIT.1: LINK DELETED.

EDIT.2: here is the old (errata) code: (The all is in 'document ready' function)

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

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

$(function() {
    $("form.form开发者_Go百科 #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;
    });
});

I suspect that when you dynamically add the dom elements after you create a new item, the click event handlers are not added. You should use the jQuery 'live' feature to bind click events to the elements.

Looking through your source it looks like you should change this:

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

to this

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

How are you binding the click event to the button? If you are not using the jquery live function you will need to rebind the click event. A live event will bind the click handler to all existing and future elements on a page. http://api.jquery.com/live/

I can see from your code, you are calling $(".delete").click(function() {...}); only once. When you use a selector like $(".delete") you are getting a collection of matching objects. If you add a new matching object you must run $(".delete").click(function() {...}); again to update the collection of object to which you are binding a click() event... or you can listen to everyone else and use .live()

jQuery live()

This method is a variation on the basic .bind() method for attaching event handlers to elements. When .bind() is called, the elements that the jQuery object refers to get the handler attached; elements that get introduced later do not, so they would require another .bind() call. For instance, consider the HTML:

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

To bind a simple click handler to this element:

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

When the element is clicked, the handler is called. However, suppose that after this, another element is added:

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

This new element also matches the selector .clickme, but since it was added after the call to .bind(), clicks on it will do nothing.

The .live() method provides an alternative to this behavior. To bind a click handler to the target element using this method:

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

And then later add a new element:

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

Then clicks on the new element will also trigger the handler.

To unbind the click handlers from all that were bound using .live(), use the .die() method:

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

You could use .live() or .delegate() to achieve the desired effect. delegate is a very awesome way to handle this sort of thing since it reduces the active number of event listeners on the page.

Are you attempting to use a .click() function on an element that has just been added to the DOM via your first Ajax call?