Question

我尝试在点击按钮时将section附加到div。

我希望仅在第一次点击时添加section，每次点击section时，我在下面使用的代码都会附加div。

我应该怎么做？

$("#nextractorapply").click(function () {
    $("#main").append('<section id="nextractor" class="five"> </section>');  
});

Answer 1

您可以使用one()，只会触发一次

$("#nextractorapply").one('click', function () { 
    // executes only once

     $("#main").append('<section id="nextractor" class="five"> </section>');  
});

$("#nextractorapply").on('click', function () { 
    // executes every time

    // do other stuff
});

Answer 2

使用条件确定它是否存在。

$("#nextractorapply").click(function () {
    if($('#nextractor').length < 0){
        $("#main").append('<section id="nextractor" class="five"> </section>');
    }  
});

Answer 3

您可以使用某种阻止其多次附加的条件。

var counter=0;
$("#nextractorapply").click(function () {
    if(counter<=0){
        $("#main").append('<section id="nextractor" class="five"> </section>');  
        counter++;
    }

    //YOUR OTHER STUFF THAT YOU NEED TO EXECUTE ON EVERY CLICK
});

Answer 4

您可以使用.unbind()

$("#nextractorapply").unbind().click(function () {
    $("#main").append('<section id="nextractor" class="five"> </section>');  
});

Answer 5

您可以检查该元素是否具有默认类，并附加html。例如，您可以将类添加到html代码中，例如：class =“first”，并在第一次单击后删除该类。

这样的代码：

var element = $("#nextractorapply");
    if(element.hasClass("first")){
          $("#main").append('<section id="nextractor" class="five"> </section>');  
          element.removeClass("first");
    }

然后在第一次单击后，将从您的html中删除“first”类，Jquery将不再附加任何html。

Answer 6

如果变量设置为true或false，则可以设置变量并触发事件。

var _clicked = false;

$('.element').click(function(){
  if(!_clicked){
   _clicked = true;
   console.log('event fired');
  }
})

Jquery：在“点击”上只附加一次div

6 个答案: