Select the Jquery HTML appended data via Jquery

Viewed 32

im having hard time finding the data append by Jquery. The append system works as following: getdatafromAjaxRequest->forLoop{appendData}

In the data there are a "menu button"(the tag) with a HTML onclick attr, this attr call a function to show the dropdown menu.

the HTML appers as expected. everything works fine. so, the problem is on trying to access the new appended data.

The AJAX function

This function is the one which load the Page with the requested info

$.ajax({
    type: "POST",
    url: `action/php/engine/Order.eng.php`,
    data: {
        Submit: '',
        Case:   'getOrder',
        Order_status: 3
    },
    success: function(response) {
        var responseArr = JSON.parse(response);
        if (responseArr.status == 1) {

            toogleOrders();
            $('.orderRowContainer').empty();

            for (let i = 0; i < responseArr.payload.length; i++) {
                var ordInfo = responseArr.payload[i].ord_info; // to skip indeixng
                var cusInfo = responseArr.payload[i].cus_info; //to skip indexing
                

                var preisGes = 0;

                for (let x = 0; x < ordInfo.orderItems.payload.length; x++) {
                    preisGes = preisGes + parseInt(ordInfo.orderItems.payload[x].price);
                }
                
                $(".orderRowContainer").append(`
                <div class="orderRow">
                    <div class="orderRow-id" >#${ordInfo.ord_id}</div>
                    <div class="orderRow-text"  ><p>${cusInfo.cus_name}<br/><small>${ordInfo.ord_date} : ${ordInfo.ord_deadline}</small></p></div>
                    <div class="orderRow-cost"  >${preisGes} EUR</div>
                    <div class="orderRow-status ${getStatusColor(ordInfo.ord_status)}"><i style="cursor: pointer;" class="fas fa-chevron-circle-down"></i></div>
                    <div class="orderDropdownMenu" name="dropdown[${i}]">
                        <ul>
                            <li onclick="giveOrder(${ordInfo.ord_id})">Auftrag Abschlisen</li>
                            <li onclick="setKvaS(${ordInfo.ord_id})">Kostenvoranschlag erstellen</li>
                            <li onclick="redirect(${ordInfo.ord_id})">Auftrag Info</li>
                            <li onclick="cancelOrder(${ordInfo.ord_id})">Auftrag Stonierern</li>
                        </ul>
                    </div>
                </div>
            `);
            }
            
           

            

        } else {
            // Show Error on reporter
            miniMsg(responseArr.status, responseArr.msg);
            console.log(responseArr.payload);
        }
        

    }
});

HTML which loaded in the Page:

<div class="orderRow">
     <div class="orderRow-id"    >#872</div>
     <div class="orderRow-text"  ><p>Name<br/><small>03.11.2020 : 07.11.2020</small></p></div>
     <div class="orderRow-cost"  >70.00 EUR</div>
     <div class="orderRow-status">
         <i style="cursor: pointer;" onclick="showDropMenu(1)" class="fas fa-ellipsis-v"></i>
     </div>
     <div class="orderDropdownMenu" name="dropdown[1]">
         <ul>
             <li>1</li>
             <li>2</li>
             <li>3</li>
             <li>4</li>
         </ul>
     </div>
</div>

Jquery Function to show the orderDropdownMenu

this function gets the dropdown menu id and chang it's display setting to block( show() )

var dropMenuIsOpen = 0;

function showDropMenu(id) {
    if (dropMenuIsOpen == 0) {
        var requestedMenuId = $(`[name = "dropdown[${id}]" ]`);
        requestedMenuId.slideToggle("slow");
        dropMenuIsOpen = 1;
    } else {
        //Hide all dropdown menus
        $(".orderDropdownMenu").slideUp("slow");
        dropMenuIsOpen = 0;
    }
    
}

Summary:

Im looking for a way to edit the new appended data.

i saw in other question that i have to add the data to $(document), that didnt help also.

0 Answers
Related