Question

这就是我设置函数的方式（codeblock中的代码）。我正在使用这种方法，因为他们正在处理动态创建的元素。我可以尝试var additionFunction = function（）{做需要$（this）}的东西并且有 $（document）.on（'click'，“。addition”，additionFunction）;为此，我需要知道如何将$（this）传递给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).


              });

请求的杂乱代码：

                  $(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 1

试试这个。这是你想要的吗。函数只会触发一次。作为一个例子，我发出警报。

<html>
<head></head>
<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<style type="text/css">

</style>

<body>
 
<button id="mybutton">CLICK ON ME , I WILL FIRE ONCE</button>
</body>

<script type="text/javascript">

$(document).ready(function(){
  var numberofclicks = 1;
  $("#mybutton").click(function(e){
    if (numberofclicks == 1) {
      alert("I'm fired ..... !");
      //do your implementation here.
    }
    numberofclicks +=1;
  });
  
});





</script>

</html>

Answer 2

没有理由在事件函数中附加事件

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

如果你因为某些原因想要嵌套它们，你应该在附加一个新事件之前分离事件：

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

仅添加处理程序一次

2 个答案: