Как добавить следующий div после клика?

Question

Я пытаюсь добавить следующий элемент div после функции chatUserSend(), но когда я добавляю новое добавление после указанной функции, элемент div, отображаемый уже, даже если chatUserSend() еще не был нажат

Как это исправить?

Пожалуйста, смотрите обновленный скрипт JS.

var custLoanAccountNum = '<span id="custLoanAccountNum" class="chat_msg_item chat_msg_item_admin"><p>What is your Loan Account Number?</p></span>';
var custName = '<span id="custConcern" class="chat_msg_item chat_msg_item_admin"><p>Type your concern or message to Customer Support</p></span>';

$("#concernType").on('click', 'li', function(){
        var concernType = $(this).html();
        $('.chat_converse').append("<span class='chat_msg_item chat_msg_item_user'><p>" + concernType + "</p></span>");

        if($(this).attr('id')){
            switch ($(this).attr('id')){
                case 'concernTypeCol':
                    $('.chat_converse').append("<span id='custTypelabel' class='chat_msg_item chat_msg_item_admin'><p>Are you a new or existing customer?</p></span><span id='custType' class='custTypelist chat_msg_item'><ul id='custType'><li id='newCustType'>New Customer</li><li id='existingCustType'>Existing Customer</li></ul></span>");
                    $("#custType").on('click', 'li', function(){
                        var custType = $(this).html();
                        $('.chat_converse').append("<span class='chat_msg_item chat_msg_item_user'>" + custType + "</span>");

                        if($(this).attr('id') == 'newCustType'){
                            $('.chat_converse').append(custName);
                            chatUserSend();
                        } else if ($(this).attr('id') == 'existingCustType'){
                            $('.chat_converse').append(custLoanAccountNum);
                            chatUserSend();
                            $('.chat_converse').append(custName);
                        }
                    });
                break;
            }
        }
    });

function chatUserSend(){
   $('#fab_send').click(function(event){
    var thought = $('#chatSend').val();
    $('.chat_converse').append("<span class='chat_msg_item chat_msg_item_user'>" + thought + "</span>");
    //sendMessage();

    $('#chatSend').val('');

    return false;
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chat_converse" class="chat_conversion chat_converse">
        <span id="concernTypelabel" class="chat_msg_item chat_msg_item_admin">
            <p>Hello, how can we help you? Please select one?</p></span>
            <span id="concernType" class="chat_msg_item ">
              
            <ul id="concernType">
                <li id="concernTypeCol">I need assistance in paying my loan. (Collections)</li>
                <li id="concernTypeCS">I want to talk to a customer service representative. (Customer Service)</li>
                <li id="concernTypeHR">I want to explore job opportunities. (Human Resource)</li>
            </ul>
          </span>
		  </div>

		  <div class="fab_field">
        <a id="fab_send" class="fab">Send</a>
        <textarea id="chatSend" name="chat_message" placeholder="Send a message" class="chat_field chat_message"></textarea>
		  </div>

Пример ожидаемого выхода

Answer 1

Можете ли вы попробовать этот код.Дайте мне знать, если вы этого хотите.

          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <div id="chat_converse" class="chat_conversion chat_converse">
            <span id="concernTypelabel" class="chat_msg_item chat_msg_item_admin">
                <p>Hello, how can we help you? Please select one?</p></span
            >
            <span id="concernType" class="chat_msg_item ">
                <ul id="concernType">
                <li id="concernTypeCol">
                    I need assistance in paying my loan. (Collections)
                </li>
                <li id="concernTypeCS">
                    I want to talk to a customer service representative. (Customer Service)
                </li>
                <li id="concernTypeHR">
                    I want to explore job opportunities. (Human Resource)
                </li>
                </ul>
            </span>

            <div id="chat_nodes"></div>
            <div id="chat_loan_acc"></div>
            </div>

            <div class="fab_field" style="display:none;">
            <a id="fab_send" class="fab">Send</a>
            <textarea
                id="chatSend"
                name="chat_message"
                placeholder="Send a message"
                class="chat_field chat_message"
            ></textarea>
            </div>

            <script>
            var custLoanAccountNum =
                '<span id="custLoanAccountNum" class="chat_msg_item chat_msg_item_admin"><p>What is your Loan Account Number?</p></span>';
            var custName =
                '<span id="custConcern" class="chat_msg_item chat_msg_item_admin"><p>Type your concern or message to Customer Support</p></span>';

            $("#concernType").on("click", "li", function() {
                var concernType = $(this).html();
                $("#chat_nodes").html(
                "<span class='chat_msg_item chat_msg_item_user'><p>" +
                    concernType +
                    "</p></span>"
                );
                $("#chat_loan_acc").html("");
                if ($(this).attr("id")) {
                switch ($(this).attr("id")) {
                    case "concernTypeCol":
                    $("#chat_nodes").append(
                        "<span id='custTypelabel' class='chat_msg_item chat_msg_item_admin'><p>Are you a new or existing customer?</p></span><span id='custType-span' class='custTypelist chat_msg_item'><ul id='custType'><li id='newCustType'>New Customer</li><li id='existingCustType'>Existing Customer</li></ul></span>"
                    );
                    $(".fab_field").hide();
                    break;
                    default:
                    $(".fab_field").show();
                    break;
                }
                }
            });

            $(document).on("click", "#custType li", function() {
                var custType = $(this).html();
                $("#chat_loan_acc").html(
                "<span class='chat_msg_item chat_msg_item_user'>" + custType + "</span>"
                );
                $(".fab_field").show();
                if ($(this).attr("id") == "newCustType") {
                $("#chat_loan_acc").append(custName);
                //chatUserSend();
                } else if ($(this).attr("id") == "existingCustType") {
                $("#chat_loan_acc").append(custLoanAccountNum);
                //chatUserSend();
                $("#chat_loan_acc").append(custName);
                }
            });

            $("#fab_send").click(function(event) {
                chatUserSend();
            });

            function chatUserSend() {
                var thought = $("#chatSend").val();
                //sendMessage();

                $("#chatSend").val("");

                return false;
            }
            </script>