CODEWITHSUNDEEP
jqueryajax
Rick Bross
Rick Bross

Reputation: 1082

jQuery - Do I have to call this function twice? - Structure Problems

So I am building an image uploader...

and I need to be able to click any of the divs I have in a list and have them go away. Easy? Yeah.

But I may also have divs in that list that were generated dynamically after page the load.

I have ajax processing the image and uploading it and whatnot, and after its uploaded it .append()'s a div holding the newly uploaded image.

Here is my AJAX code:

$("#chosenfile").change(function(){
    var data;

    data = new FormData();
    data.append('uploadedfile', $( '#chosenfile' )[0].files[0]);
    $('#loader').css('display','block');
    $.ajax({
        url: '/includes/uploadimage.php',
        data: data,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function ( data ) {
            //console.log(data); //returns a string of the data.
            var json = JSON.parse(data); //parses the string into an object.
            //console.log(json); //logs the object.

            if (json.link) { //If the image is uploaded and returned a link.
                $('#remove').click();
                $('#scrollwindow').append("<div class='you'><img imgid='" + json.id + "' src='" + json.link + "' alt=''><span class='delete'>x</span></div>");
                addToSlider(1);
                $(".delete").click(deleteRowFunct);
                $('#loader').css('display','none');
            };
        }
    });
});

$(".delete").click(function(){
    deleteRowFunct;
        addToSlider(-1);
});

This allows a user delete a row. When this function is fired, it will delete the row in the database (currently it tried to delete the row twice, since the .click() event and function are defined in the two places.) Which isnt a big deal... I mean its based on the row ID, so I dont care if it tries to delete it twice..

But now I need to not only delete the row in the database, I need to resize the div holding the list of divs holding images... and thats where my code stops working like it should...

I am using addToSlider(1); everytime I upload an image that finds the size of the image and adjusts the size of the wrapping div accordingly.

That works fine...

now I want to do addToSlider(-1); when the row is deleted to find the size of the image and adjust the wrapping div accordingly.

What I've tried:

If I add the addToSlider(-1); to the ajax if(data.link) it will only resize after an image is uploaded.

If I add addToSlider(-1); to the $(".delete").click() event at the end of my code, it will only resize on images that were already there on page load, and NOT images that were dynamically uploaded.

^^ DISPLAYED ABOVE IN THE CODE.

If I add addToSlider(-1); to the actual deleteRowFunct() the size is subtracted twice...

The Question:

How do I call 'deleteRowFunct()' and addToSlider(-1); ONLY ONCE and apply.click() events to dynamically generated divs AND divs generated on page load?

Upvotes: 0

Views: 166

Answers (2)

sergioadh
sergioadh

Reputation: 1471

you could use the on jquery

$(document).on('click', '.delete', function(){
 deleteRowFunction(this);
});

this will add the event to dynamically generated elements.

EDIT: Make your deleteRowFunction accept a parameter and pass this to it. That way your function can work with it.

function deleteRowFunction(thing){
 $(thing).doSomething();
}

Upvotes: 1

Ghassan Idriss
Ghassan Idriss

Reputation: 2118

Try using this method:

$(".delete").live('click', function(e){
  // do stuffs
});

http://api.jquery.com/live/

Upvotes: 0

Related Questions