Still. Learning Still. Learning - 3 months ago 13
jQuery Question

Adding handler only once

This is how I've set up my functions (the code in codeblock). I'm using this method as they're dealing with dynamically created elements. Could I try var additionFunction = function () { do stuff that requires $(this) } and have
$(document).on('click' , ".addition" , additionFunction); For this I'd need to know how to pass $(this) to additionFunction.

$(document).on('click' , ".addition" , function(event) {

//do stuff that requires $(this)
//the problem is that every click adds new handler and I can't wrap my head
//around the problem of how to do the necessary changes and still have access
//to $(this) which is in this case particular ".addition" (there are many).


});


The messy code that was requested:

$(document).on('click' , ".addition" , function(event) {



$("#form2").show();

var nameforfolder;
var _this = this;
var this2 = $(this).parent().parent().parent().prev().text();

$("#form2").submit(function(e) {
e.preventDefault();
return false;
});


var asd = 0;

$(".submitfolder").click(function() {
var data3 = $("#form2 :input").serialize();
var data4 = $("#form2 :input").val();
nameforfolder = data4;

/*$.post( $("#form2").attr("action"),data3, function(info) {

var asd = info;
$("#form2").hide();

}); */
$.ajax({
url: "userfolders.php",
type: "POST",
data: {bar2: data4,
folderparent: this2},
success: function() {
asd = 1;

$("#form2").hide();

if (asd > 0) {


var folders = $(_this).parent().children(".folder").length;
var count =( 1 + folders);
var folderName = nameforfolder;
var addFolder = ("<div class=folder> </div>");
var addFolderImg = '<img class=folderImg src="folder-icon.png">' ;
var addFolderName = ("<h3 class=foldName>" + folderName + "</h3>");
var addFolderMenu = ("<div class=folderMenu style=overflow:auto></div>");
var addFolderMenuIcon = '<img class=folderMenuAdd src="plus-icon.png">' ;
//var expandedAddText2 = '<img class=addText2 src="text.png">' ;
var addLi_Remove = '<img class=liRemove src="x-icon.png">' ;
var addUl_Menu = ("<ul class=ul> </ul>");



console.log(_this);


if (folders == 0) {


$(_this).parent().append(addFolder);
}
else {
$(_this).parent().children(".folder").last().after(addFolder);
};


$(_this).parent().children(".folder").last().append(addFolderImg);
$(_this).parent().children(".folder").last().append(addFolderName);
$(_this).parent().children(".folder").last().append(addFolderMenu);
$(_this).parent().children(".folder").children(".folderMenu").hide();
$(_this).parent().children(".folder").children(".folderMenu").last().append(addFolderMenuIcon);
//$(_this).parent().children(".folder").children(".folderMenu").last().append(expandedAddText2);
$(_this).parent().children(".folder").children(".folderMenu").last().append(addLi_Remove);
$(_this).parent().children(".folder").children(".folderMenu").last().append(addUl_Menu);


} else {


};
}

});


});







//createFolder(nameforfolder);


});

Answer

no reason to attach events inside an event function

$(".submitfolder").click(function() {
  ...
});
$("#form2").submit(function(e) {
  ...
});
$(document).on('click', ".addition", function(event) {
  ...
});

if you do want to nest them for some reason you should detach event before attaching a new one like so:

$(document).on('click', ".addition", function(event) {
  $(".submitfolder").off("click");
  $(".submitfolder").click(function() {
    ...
  });
  $("#form2").off("submit");
  $("#form2").submit(function(e) {
    ...
  });
});