Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery][JS] Korzystanie z elementu po .append()
Forum PHP.pl > Forum > Po stronie przeglądarki
Paplo
Witam

odrazu przepraszam za niezrozumiały temat ale nie wiedziałem jak to inaczej krótko napisać, już wyjaśniam:

mam coś takiego:
  1. <script>
  2. $(document).ready(function(){
  3.  
  4. // set images for edit and delete
  5. $(".eimage").attr("src",editImage);
  6. $(".dimage").attr("src",deleteImage);
  7.  
  8. $("#deliverTab_paginate, #deliverTab_length, .DTTT_button").on("click",function(){
  9. $(".eimage").attr("src",editImage);
  10. $(".dimage").attr("src",deleteImage);
  11. $("."+table).append(blankrow);
  12. });
  13.  
  14. // init table
  15. blankrow = '<tr id="topYes" valign="top" class="inputform"><td></td>';
  16. for(i=0;i<columns.length;i++){
  17. // Create input element as per the definition
  18. input = createInputInput(i,'');
  19. blankrow += '<td class="ajaxReq">'+input+'</td>';
  20. }
  21. blankrow += '<td id="actionSave" class="right"><a href="java script:;" class="'+savebutton+'"><img src="'+saveImage+'"></a></td></tr>';
  22.  
  23. // append blank row at the end of table
  24. $("."+table).append(blankrow);
  25.  
  26. // Delete record
  27. $(document).on("c...



i potem dalej gdieś w kodzie mam:

  1. <script>
  2. $(document).ready(function(){
  3.  
  4. $("#"+where_are_u).addClass('active');
  5.  
  6. $( "#inputDeliverDate" ).datepicker( {dateFormat: 'yy-mm-dd'} );
  7.  
  8. $("#TabBodyDeliver tr td[id='delivery_name'], #TabBodyDeliver tr td[id='delivery_sup'], #TabBodyDeliver tr td[id='delivery_date'], #TabBodyDeliver tr td[id='delivery_exchange']").on("click",function(){
  9. id = $(this).closest("tr").attr("id");
  10. console.log(id);
  11.  
  12. window.location.href = "deliverDe.php?id="+id;
  13. });
  14. ...


jak załaduję stronę po raz pierwszy to wykona sie "// append blank row at the end of table ..." to, i wtedy normalnie wszystko działa tak jak trzeba czyli i tam tworzy sie pole np "inputDeliverDate" i działa, kalendarz sie pojawia bez problemu, gdy wykona jakas operacje np dodawania to te "inputy" "znikaja" czyli potem sobie musze kliknac (np .DTTT_button ) znow coś zeby sie pojawily czyli zeby sie wykonalo "$("."+table).append(blankrow);" i inputy sie pojawiaja znów. i do tego miejsca jest wszystko tak jak chciałem i wszystko działa pieknie... tylko potem jak klikam w tego ponownie utworzonego "inputa" ( np #inputDeliverDate) to kalendarz sie już nie pojawia i zadna akcja nie chce działac na tym ponownie utworzonym .append(blankrow)

sprawdzone:
1. nie ma dwóch pól o takich samych nazwach - tamten pierwszy znika potem jak chce znów "inputy" naciskam sobie coś(.DTTT_button) i się pojawia.
2. umieszczenie wszystkiego w "<script>$(document).ready(fun..." nic nie daje.

Proszę o jakaś wskazówkę
Arcioch
Poczytaj o czymś takim jak jQuery.On i jak używać tego na całym document smile.gif

  1. $(document).on('event', 'selector', function (e) {
  2.  
  3. });


Twój kod wykonuje się na drzewie DOM, które już istnieje a nie wykonuje się na nowo dodanym elemencie smile.gif
Dodatkowo ponowna inicjacja kalendarza i powinno grać.
Comandeer
Ale po co ma przypinać do całego document? Powinien przypiąć do najbliższego rodzica, który się nie zmienia. Nie ma sensu trzymać wszystkiego w DOM-owym global scope.
Paplo
Dziękuje smile.gif
  1. $("#TabBodyDeliver").on("dblclick","#inputDeliverExchange",function(){
  2. $('#myModalee').modal('show');
  3. });
  4.  
  5. $("#TabBodyDeliver").on("click","#delivery_name, #delivery_date",function(){
  6. id = $(this).closest("tr").attr("id");
  7. console.log(id);
  8.  
  9. window.location.href = "deliverAdd.php?id="+id;
  10. });

Działa, jeszcze tylko ten kalendarz

edit: też już działa
  1. $('#TabBodyDeliver').on('focus',"#inputDeliverDate", function(){
  2. $(this).datepicker( {dateFormat: 'yy-mm-dd'} );
  3. });


Jeszcze raz dziękuje za wskazówkę smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.