jQuery append添加了多个项目

Question

我正在尝试在点击按钮时自动创建一个div，我在这里有一个问题，每次我点击按钮时它会增加div的显示。你能帮忙解决这个问题吗？

$(document).ready(function() {
  $("#btn2").click(function() {
    $("div").append("<div>Appended item</div>");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div></div>
<button id="btn2">cliquer</button>

我按照你的建议并在我自己的代码中测试它，但我仍有同样的问题

请在下面找到我的代码

的JavaScript

function DisplayOffer(){

    $("button").click(function() {
    var id_button =this.id;
    console.log("id_button:"+ id_button);
    var value_button =$('#'+ id_button).text();
    console.log("value_button:"+ value_button);
    $('#row').append('<p id=aaa>'+ value_button + '</p>');

});

}

在我的JS中我有4个按钮，当我点击一个按钮时，它应该为每个按钮创建两个新的div我将显示按钮的名称和第一步的描述我只想显示按钮的名称但它显示错误（不是像我在问题开头告诉你的那样一次）

function bot() {
    var input = document.getElementById("input").value;
    output.innerHTML = '<div id="a2" class="msj macro"><div class="avatar"><img class="img-circle" style="width:100%;" src="'+ me.avatar +'" /></div></div><div class="title1">Bonjour ' + input + '&nbsp;,vous voulez des informations sur quelle offre ? </br> <button type="button" id="h" class="btn btn-danger btn_hdwm bt" onclick=DisplayOffer()>Hourly</button>&nbsp;<button type="button" id="d" class="btn btn-danger btn_hdwm bt " onclick=DisplayOffer()>Daily</button>&nbsp;<button type="button" id="w" class="btn btn-danger btn_hdwm bt" onclick=DisplayOffer()>Weekly</button>&nbsp;<button type="button" id="m" class="btn btn-danger btn_hdwm bt" onclick=DisplayOffer()>Monthly</button></div>';

HTML：

    <div class="container" id="id_div_hide">
    <div id="row" class="chattt col-sm-3 col-sm-offset-4 frame a">
        <div id="test_id"></div>
        <div id="output" class="ma"> </div>
        <div id="outputh2" class="output2"></div>
        <div id="outputh3" class="output3"></div>
    </div>
    <div id="az1" class="text text-r az1_class" style="background:whitesmoke !important">
        <input id="input" class="mytext" placeholder="Type a message" /> 
    </div>
</div> 

Full JS：

var me = {};
me.avatar = "https://lh6.googleusercontent.com/-lr2nyjhhjXw/AAAAAAAAAAI/AAAAAAAARmE/MdtfUmC0M4s/photo.jpg?sz=48";

$('#outputh2').hide();
$('#outputh3').hide();


var timedQuestion=0;
var questionNum = 0;                                                    
var question = '<div class="text-chat1">Bonjour cher client, moi c est Djezzy bot, tu t appelles comment?</h1></div>';                 

var output = document.getElementById('output');             
output.innerHTML = question; 


function bot() {
    var input = document.getElementById("input").value;
    output.innerHTML = '<div id="a2" class="msj macro"><div class="avatar"><img class="img-circle" style="width:100%;" src="'+ me.avatar +'" /></div></div><div class="title1">Bonjour ' + input + '&nbsp;,vous voulez des informations sur quelle offre ? </br> <button type="button" id="h" class="btn btn-danger btn_hdwm bt" onclick=DisplayOffer()>Hourly</button>&nbsp;<button type="button" id="d" class="btn btn-danger btn_hdwm bt " onclick=DisplayOffer()>Daily</button>&nbsp;<button type="button" id="w" class="btn btn-danger btn_hdwm bt" onclick=DisplayOffer()>Weekly</button>&nbsp;<button type="button" id="m" class="btn btn-danger btn_hdwm bt" onclick=DisplayOffer()>Monthly</button><div id="zmar"></div></div>';
    setTimeout(timedQuestion, 2000);    
    console.log("num question est :"+ questionNum);

}


function DisplayOffer(){


    var date = formatAMPM(new Date());
    $("button").click(function() {
    var id_button =this.id;
    console.log("id_button:"+ id_button);

    var value_button =$('#'+ id_button).text();
    console.log("value_button:"+ value_button);
    //$('#row').append( value_button);
    $('#row').append('<span class=aaa>'+value_button+ '</span>');
});
}



// to get the time 
function formatAMPM(date) {
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var ampm = hours >= 12 ? 'PM' : 'AM';
    hours = hours % 12;
    hours = hours ? hours : 12; // the hour '0' should be '12'
    minutes = minutes < 10 ? '0'+minutes : minutes;
    var strTime = hours + ':' + minutes + ' ' + ampm;
    return strTime;
}    

// to hide and display the chat
function toggle_div(img, id) { 
  var div = document.getElementById(id); 
  if(div.style.display=="none") { 
    div.style.display = "block";

  } else { 
    div.style.display = "none"; 

  }
}



$(document).keypress(function(e) {
  if (e.which == 13) {
    bot();   

    questionNum++;                                                                      
  }
});

CSS：

.chat{
    background-color:#fff4f6;
    overflow-y:scroll;
    width: 280px;
    height: 370px;
    position: fixed;
    //float:right;
    bottom: 0px;
    right: 0px;
}

.title1{
    font-size: 12px;
    color: #183f88;

}

.btn_hdwm1{


    padding-left: 20px;
    padding-right: 15px;
    border-radius: 8px;
    padding-bottom: 5px;
    background: #e11e26;
    color: #fff;
}


.btn_hdwm{
    padding: 7px 12px
    display: inline-block;
    margin: 5px;
    background: #fff;
    //color: #06c5a6;
    color:#c52206;
    cursor: pointer;
    border-radius: 20px;
    font-size: 0.9rem;
    //border: 1px solid rgba(6,153,184,0.3);
    border: 1px solid rgba(184, 6, 6, 0.3);
}




.mytext{
    border:0;padding:10px;background:whitesmoke;
    position: fixed;
    /*margin: 10px;*/
    height: 4%;
    width: 15%;
    /*margin: 67px 0px 0px -57px;*/
    margin: 5px 0px 0px -11px;
}
.text{
    width:75%;display:flex;flex-direction:column;
}
.text > p:first-of-type{
    width:100%;margin-top:0;margin-bottom:auto;line-height: 13px;font-size: 12px;
}
.text > p:last-of-type{
    width:100%;text-align:right;color:silver;margin-bottom:-7px;margin-top:auto;
}
.text-l{
    float:left;padding-right:10px;
}        
.text-r{
    float:right;padding-left:10px;
}
.avatar{
    display:flex;
    justify-content:center;
    align-items:center;
    width:25%;
    float:left;
    padding-right:10px;
}
.macro{
    margin-top:5px;width:85%;border-radius:5px;padding:5px;display:flex;
}
.msj-rta{
    float:right;background:whitesmoke;
}
.msj{
    float:left;background:white;
}
.frame{
    background:#e0e0de;
    height:372px;
    overflow:hidden;
    padding:0;
}
.frame > div:last-of-type{
    position:absolute;bottom:5px;width:100%;display:flex;
}
ul {
    width:100%;
    list-style-type: none;
    padding:18px;
    position:absolute;
    bottom:32px;
    display:flex;
    flex-direction: column;

}
.msj:before{
    width: 0;
    height: 0;
    content:"";
    top:-5px;
    left:-14px;
    position:relative;
    border-style: solid;
    border-width: 0 13px 13px 0;
    border-color: transparent #ffffff transparent transparent;            
}
.msj-rta:after{
    width: 0;
    height: 0;
    content:"";
    top:-5px;
    left:14px;
    position:relative;
    border-style: solid;
    border-width: 13px 13px 0 0;
    border-color: whitesmoke transparent transparent transparent;           
}  
input:focus{
    outline: none;
}        
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #d4d4d4;
}
::-moz-placeholder { /* Firefox 19+ */
    color: #d4d4d4;
}
:-ms-input-placeholder { /* IE 10+ */
    color: #d4d4d4;
}
:-moz-placeholder { /* Firefox 18- */
    color: #d4d4d4;
}


.a{
    /*margin-top: 199px;*/
    float: right;

}



.boutonHourely{
    padding: 7px 12px

    display: inline-block;
    margin: 5px;
    background: #fff;
    color: #06c5a6;
    cursor: pointer;
    border-radius: 20px;
    font-size: 0.9rem;
    border: 1px solid rgba(6,153,184,0.3);
}

.text_chat1{
    font-family: Roboto,"Helvetiva Neue","Segoe UI",sans-serif;
    font-size: 11px;
    }

#output{

    font-family: Roboto,"Helvetiva Neue","Segoe UI",sans-serif;
    font-size: 11px;
    width: 65%;
    background-color: #fff;
    margin-left: 9px;
    border-radius: 20px;
    font-size: 12px;
    padding: 0px -8px 4px 0px;
    margin: 12px;
    padding-right: 5px;
    padding-left: 12px;
    padding-top: 5px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;

}


.bt{
    width: 30px;
 }


 .output:before {
    width: 0;
    height: 0;
    content: "";
    top: -5px;
    left: -14px;
    position: relative;
    border-style: solid;
    border-width: 0 13px 13px 0;
    border-color: transparent #ffffff transparent transparent;

    }

.logo-bule{
    width: 50px;
    height:50px;
    border-radius: 40px;
    /*float: right;*/
    position: fixed;
    right: 6%;
    bottom: 0px;
}


.logo-bule:after{

   /* position:relative;
    float:right;
    bottom:0px;*/

}

.chattt{
    margin-top: 6.3%;
    overflow-y: scroll;
}

.output2,.output4,.output5, .output7, .output9, .aaa{
    font-family: Roboto,"Helvetiva Neue","Segoe UI",sans-serif;
    font-size: 11px;
    width: 21%;
    background-color: #b2d0e5;
    margin-left: 9px;
    border-radius: 20px;
    font-size: 12px;
    padding: 0px -8px 4px 0px;
    margin: 12px;
    padding-right: -3px;
    padding-left: 12px;
    padding-top: 5px;
    /* margin-left: auto; */
    /* margin-right: auto; */
    margin-top: 2%;
    float: right;
    padding-bottom: 5px;
}

.output3{

    font-family: Roboto,"Helvetiva Neue","Segoe UI",sans-serif;
    font-size: 11px;
    width: 65%;
    background-color: #fff;
    margin-left: 9px;
    border-radius: 20px;
    font-size: 12px;
    padding: 0px -8px 4px 0px;
    margin: 12px;
    padding-right: 5px;
    padding-left: 12px;
    padding-top: 5px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20%;
    font-size: 12px;
    color: #183f88;

}


.output5{
font-family: Roboto,"Helvetiva Neue","Segoe UI",sans-serif;
    font-size: 11px;
    width: 21%;
    background-color: #b2d0e5;
    margin-left: 9px;
    border-radius: 20px;
    font-size: 12px;
    padding: 0px -8px 4px 0px;
    margin: 12px;
    padding-right: -3px;
    padding-left: 12px;
    padding-top: 5px;
    /* margin-left: auto; */
    /* margin-right: auto; */
    margin-top: 2%;
    float: right;
    padding-bottom: 5px;
}

.output6, .output8, .output10{

    font-family: Roboto,"Helvetiva Neue","Segoe UI",sans-serif;
    font-size: 11px;
    width: 65%;
    background-color: #fff;
    margin-left: 9px;
    border-radius: 20px;
    font-size: 12px;
    padding: 0px -8px 4px 0px;
    margin: 12px;
    padding-right: 5px;
    padding-left: 12px;
    padding-top: 5px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20%;
    font-size: 12px;
    color: #183f88;

}

谢谢

Answer 1

这种方法的问题是，插入的元素也是<div>。为主人<div>提供一种独特的识别方式。

$("#btn2").click(function(){
  $("body > div").append("<div>Appended item</div>");
});

对于此当前示例，我使用了body > div选择器，因为<div>直接位于<body>下。更好的方法是使用<div>的类并使用这种方式：

<div class="master"></div>

$("#btn2").click(function(){
  $(".master").append("<div>Appended item</div>");
});

完整代码

$(document).ready(function() {
  $("#btn2").click(function() {
    $("body > div").append("<div>Appended item</div>");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div></div>
<button id="btn2">cliquer</button>