How to prevent Multiple Ajax request?

Question

I have spent 2 days to find a solution, but stackoverflow does not have correct answer for this. I have 2 ajax function first loading values onload,

$.ajax({
    url: 'http://localhost/movies/data/home_data.php',
    type: 'POST',
    dataType: 'json',
    cache: false,
    success: function(data) {

        var home_contents_data='';

        $.each(data, function(index, element) {

            home_contents_data += '<a href="single-movie.html" onclick="readSingleMovie2(\''+data[index].id+'\')">More Details</a>';

        });

    }
});

it is working and giving data perfectly. it have a onclick function call as "readSingleMovie2()" I want to send this value to another ajax function. this is my second ajax function

//second function
function readSingleMovie2(movie_id2)
{   

myApp.onPageInit('single-movie-2', function (page) {

var single_movie_details2 = '';

$.ajax({
    url: 'http://localhost/movies/data/single_movie-2.php?rand='+(Math.random()),
    type: 'POST',
    data: 'movie_id2='+movie_id2, 
    dataType: 'json',
    cache: false,
    success: function(data) {

        var single_movie_data='';
        $.each(data, function(index, element) {

            single_movie_data += '<div>'+data[index].film_name+'</div>';

        });

    }
});



})

}

That is also working perfectly and that function data comes inside to the function. but my problem is. when I click second time some of value from 1st function. second function's URL loading multiple times. I have attached firebug screenshot image to get an idea.

I tried with unbind, preventDefault, preventStop and cache false... everything I know and get the internet. But I am still finding the better solution for this. Please help me to resolve this problem.

Really appreciate your valuable time and answers Thanks!

Answer 1

Instead of unbind, preventDefault and preventStop, try off() .

See this: http://api.jquery.com/off/