javascript - jQuery: click() triggers twice with dynamic content -

i'm loading contents database on ajax div. then, clicking on of these content-pieces should reload new content.

the ajax request initialized method in class call @ beginning:

function request(tag1, tag2, tag3) {     this.tag1 = tag1,     this.tag2 = tag2,     this.tag3 = tag3 } request.prototype = {     ajaxcategoryrequest: function () {         $.ajax({             type: "get",             url: "request2.php",             data: "tag1=" + this.tag1 + "&tag2=" + this.tag2 + "&tag3=" + this.tag3,             success: function (data) {                 var jdata = $.parsejson(data);                 //frage ausgeben                 $("h1.question").html(jdata[0]);                 //tiles ausgeben                 (var = 1; < jdata.length; i++) {                     $("#tiles").append(                         '<div class="category" id="' + jdata[i].type + '" data-owntag="' + jdata[i].owntag + '" data-description="' + jdata[i].description + '"><img src="' + jdata[i].imageurl + '" alt="' + jdata[i].name + '"/><div class="ctitle">' + jdata[i].name + '</div></div>'                     );                 }             }         });     } }; var searchtype = new request("", "", ""); searchtype.ajaxcategoryrequest(); 

then clicking 1 of above created div's should start new request:

    $("#tiles").on('click', '.category', function () {         var tag1 = "newtag";         var tag2 = "newtag";         var tag3 = "newtag";         //remove old content         $('.category').remove();         //start new request         var nextrequest = new request(tag1, tag2, tag3);         nextrequest.ajaxcategoryrequest();     }); }); 

basically everything's working, content loaded, , if click on div, trigger new request, here comes error, it's triggered twice. so, every new loaded element appears twice.

i searched it, , think it's due printing-loop in ajax request, binding click function every time div. read lot .unbind("click") , .bind() or similar( .off() ), nothing worked me. maybe there solution problem?

it's triggered twice

actually, not really. put console.log("mouseclick"); in first line of click listener , see once per click.

$("#tiles").on('click','.category',function(e){    // …    //remove old elements    $('.category').fadeout(200,function(){        console.log("mouseclick");        $(this).remove();        //start request when animation completed        var nextrequest = new request(tag1,tag2,tag3);        nextrequest.ajaxcategoryrequest();    }); }); 

the animation problem. callback fadeout invoked for each of .category elements - that's why $(this).remove() works (as this single <div> element).

so starting new request each of categories have removed, of course not want. moving request out of animation callback, start right away. there no race conditions, - when ajax faster 200 ms - happen new categories appear while old ones still fading out.

if want prevent such glitch, need find way fire ajax after of animation callbacks have completed. fortunately, there .promise method - returns promise guaranteed resolve once, , can add callbacks end of event queue:

$("#tiles").on('click','.category',function(e){    console.log("mouseclick");    // …    // remove old elements    $('.category').fadeout(200,function(){        $(this).remove();    }).promise().done(function() {        // start request once when animations completed        var nextrequest = new request(tag1,tag2,tag3);        nextrequest.ajaxcategoryrequest();    }); }); 

if want shorten time until ajax requests finished, promises can run animation , request in parallel easily, adding callback when both tasks finished:

function categoryrequest(data) {     return $.ajax({         type: "get",         url: "request2.php",         data: {tag1: tag1, tag2: tag2, tag3: tag3},         datatype: "json" // invokes $.parsejson automatically     }); } function outputdata(jdata) {     //frage ausgeben     $("h1.question").html(jdata[0]);     //tiles ausgeben     (var = 1; < jdata.length; i++) {          $("#tiles").append(              '<div class="category" id="' + jdata[i].type + '" data-owntag="' + jdata[i].owntag + '" data-description="' + jdata[i].description + '"><img src="' + jdata[i].imageurl + '" alt="' + jdata[i].name + '"/><div class="ctitle">' + jdata[i].name + '</div></div>'          );     } }  //erster aufruf categoryrequest("", "", "").done(outputdata);  // weitere aufrufe bei click $("#tiles").on('click','.category',function(e){     console.log("mouseclick");     //define next request variables (tags)     var stage = $(this).attr('id');     var owntag = $(this).data("owntag");     var tag1 = "", tag2 = "", tag3 = "";      if (stage == 'searchtype')         tag1 = owntag;     else if (stage == 'category')         tag2 = owntag;     else if (stage == 'subcategory')          tag3 = owntag;     else          console.log("no valid (stage)type defined");      var removed = $('.category').fadeout(200,function(){         $(this).remove();     }).promise();     var request = categoryrequest(tag1,tag2,tag3);     $.when(request, removed).done(function(requestresults) {         outputdata(requestresults[0]);     });   });