brak dostępu do elementu DOM po append() Opcje

[john_doe]

Cześć,

mam dwie tabelki. Przerzucam wiersz z jednej do drugiej -> o tym była mowa TUTAJ
W tej drugiej tabelce dodałem przycisk, którym wyzwalam bootstrap modal i przenoszę na niego jedną wartość do forma w taki sposób

[HTML] pobierz, plaintext 
$('#fatteningElements').on('click', '.edit-element', function(event) {
            event.preventDefault();
 
            resetModalFormErrors( '#quantity-form' );
 
            var positionId = $(this).attr('data-id');
            var quantity   = $.trim($(this).closest('tr').find('.quantity').html());
 
            $('input[name="id"]').val(positionId);
            $('#quantity').val(quantity).attr('max', quantity);
            $('#quantity').focus();
 
        });
[HTML] pobierz, plaintext 

klikam w submit

[HTML] pobierz, plaintext 
$('#quantity-form').on('submit', function (e) {
            e.preventDefault(e);
 
            var url   = $( this ).attr('action');
            var $form = $( this );
 
            $.ajax({
 
                type: "post",
                url: url,
                data: $(this).serialize(),
                success: function (data) {
                    var row = $('#fatteningElements').find($('#fatteningelements_async_content tr[data-row="'+data.id+'"]')); // I TUTAJ JEST KICHA, NIE MOGĘ TEGO W TEN SPOSÓB ZNALEŹĆ
                    row.find('.quantity').text(data.quantity);
                }
            })
        });
[HTML] pobierz, plaintext 

kiedy wyświetlę tą tabelkę prosto z bazy powyższy kod na sumbit działa. Generalnie co się źle dzieje? Po submicie update leci ładnie do bazki ale chce tą wartość w komórce nadpisać tą nową.

wrzuce jeszce html tej tabelki

[HTML] pobierz, plaintext 
<table id="fatteningElements" class="table m-table--head-no-border table-hover m-table table-responsive">
                                                        <thead>
                                                        <tr>
                                                            <th>List</th>
                                                            <th>Ilość</th>
                                                            <th>Akcje</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody id="fatteningelements_async_content">
 
                                                                                                                            <tr data-row="56">
                                                                    <td><i class="fa fa-mars"></i> BUT 6</td>
                                                                    <td class="quantity">1</td>
                                                                    <td>
                                                                        <a href="#" class="btn btn-success m-btn m-btn--icon btn-sm m-btn--icon-only edit-element" data-toggle="modal" data-target="#m_modal_quantity" data-id="56">
                                                                            <i class="la la-edit"></i>
                                                                        </a>
                                                                        <a href="#" class="btn btn-danger m-btn m-btn--icon btn-sm m-btn--icon-only delete-element" data-id="56">
                                                                            <i class="la la-trash"></i>
                                                                        </a>
                                                                    </td>
                                                                </tr>
                                                                                                                            <tr data-row="71">
                                                                    <td><i class="fa fa-venus"></i> BUT 7</td>
                                                                    <td class="quantity">12</td>
                                                                    <td>
                                                                        <a href="#" class="btn btn-success m-btn m-btn--icon btn-sm m-btn--icon-only edit-element" data-toggle="modal" data-target="#m_modal_quantity" data-id="71">
                                                                            <i class="la la-edit"></i>
                                                                        </a>
                                                                        <a href="#" class="btn btn-danger m-btn m-btn--icon btn-sm m-btn--icon-only delete-element" data-id="71">
                                                                            <i class="la la-trash"></i>
                                                                        </a>
                                                                    </td>
                                                                </tr>
 
                                                        </tbody>
                                                    </table>
[HTML] pobierz, plaintext 

Ten post edytował john_doe 19.03.2018, 14:38:47

[trueblue]

A co wyświetla console.log(data) zaraz przed tą "kichą"?

[markuz]

Nie:

Kod

var row = $('#fatteningElements').find($('#fatteningelements_async_content tr[data-row="'+data.id+'"]'));

A:

Kod

var row = $('#fatteningElements').find('#fatteningelements_async_content tr[data-row="'+data.id+'"]');

[john_doe]

trueblue console.log(data) prawidłowo zwraca to co zwraca metoda po stronie serwera. Cały mój zmodyfikowany obiekt.
markuz - to nic nie zmienia

takie selector ma dokładni taki sam objaw

[HTML] pobierz, plaintext 
var row = $('#fatteningElements tr[data-row="'+data.id+'"]');
[HTML] pobierz, plaintext 

[markuz]

W takim razie w drzewie DOM nie ma tego obiektu lub data.id jest nieprawidłowe, spróbuj sobie to odpalić z poziomu konsoli przeglądarki. Sam selektor wygląda OK.

[john_doe]

zobacz robię to tak, że inicjalnie tabelka do której przerzucam dane jest wypełniana normalnie z serwera. Dalej gdy przerzucam wiersz leci ajax z insertem i append wiersza ( dla wizualności ) i teraz wklejam kod tabelki z narzędzi deweloperskich gdzie 1szy wiersz jest załadowany z serwera a drugi dynamicznie przez append

[HTML] pobierz, plaintext 
<table id="fatteningElements" class="table m-table--head-no-border table-hover m-table table-responsive">
   <thead>
      <tr>
         <th>Rasa</th>
         <th>Ilość</th>
         <th>Akcje</th>
      </tr>
   </thead>
   <tbody id="fatteningelements_async_content">
      <tr data-row="74">
         <td><i class="fa fa-mars"></i> BUT 6</td>
         <td class="quantity">1</td>
         <td>
            <a href="#" class="btn btn-success m-btn m-btn--icon btn-sm m-btn--icon-only edit-element" data-toggle="modal" data-target="#m_modal_quantity" data-id="74">
            <i class="la la-edit"></i>
            </a>
            <a href="#" class="btn btn-danger m-btn m-btn--icon btn-sm m-btn--icon-only delete-element" data-id="74">
            <i class="la la-trash"></i>
            </a>
         </td>
      </tr>
      <tr data-row="44"> <!-- ten jest zapendowany, dla 1szego kody js`owe działaja a dla tego nie :(
-->
         <td><i class="fa fa-venus"></i> CONVERTER </td>
         <td class="quantity">20</td>
         <td><a href="#" class="btn btn-success m-btn m-btn--icon btn-sm m-btn--icon-only edit-element" data-toggle="modal" data-target="#m_modal_quantity" data-id="75"><i class="la la-edit"></i></a> <a href="#" class="btn btn-danger m-btn m-btn--icon btn-sm m-btn--icon-only delete-element" data-id="75"><i class="la la-trash"></i></a></td>
      </tr>
   </tbody>
</table>
[HTML] pobierz, plaintext 

[trueblue]

W wywołaniu ajax'owym powyżej nie robisz append. Możesz gdzieś indziej i najzwyczajniej później niż próbujesz znaleźć szukany wiersz.