[JavaScript][AJAX] Problem z danymi zwróconymi przez AJAX Opcje

[maciek257]

Dzień dobry,

Mam pewien problem z danymi zwracanymi przez AJAX.
Skrypt pobiera obiekt JSON, wyciąga z tego tablice i wywołuje w pętli:

[HTML] pobierz, plaintext 
success: function(response){
  table = [];            
  for (i = 0; i < response.length; i++){
  table[i] = $.map(response[i], function(el) { return el });
 
 title = table[i][1];
 description = table[i][2];
 date= table[i][3];
 autor = table[i][7];
 
 table[i] = ('<h2>'+title+'</h2><p class="content">'+description+'</p><p class="data">Data: <strong>'+date+'</strong></p>
<p class="autor">Autor: <strong>'+autor+'</strong></p> <button onclick="$("#popup-edit").fadeIn();">Edytuj</button>');
  }
$('#results').html(table);
}
[HTML] pobierz, plaintext 

Pojawia się jednak problem z tym fragmentem:

[HTML] pobierz, plaintext 
<button onclick="$("#popup-edit").fadeIn();">Edytuj</button>
[HTML] pobierz, plaintext 

Ponieważ pobrane dane są umieszczane w DIV'ie '#results' dynamicznie i nie ma ich w kodzie źródłowym (DOM) to wywołanie przyciskiem okna '#popup-edit' (znajdującego się w DOM) jest nie możliwe.

Czy jest możliwość wywołania elementu '#popup-edit' z dynamicznie wczytywanej treści bez przechodzenia na inną podstronę i bez odświeżania aktualnej?
Przeładowanie nie wchodzi w grę.

Najlepiej gdyby istniała możliwość dodania pobranych danych do DOM, ale z tego co wiem to raczej nie możliwe.

Będę wdzięczny za pomoc.

Pozdrawiam.

[viking]

https://prophp.pl/article/15/jquery%2C_zdar...e_metoda_%24.on
fragment Delegacja zdarzeń

[trueblue]

1. DOM to nie źródło strony.
2. Dane dodawane za pomocą metody html są w DOM, pod warunkiem, że przekazujesz tej metodzie string.
3. Zobacz gdzie otwierasz cudzysłowy i gdzie zamykasz.
4. Wywołanie przyciskiem okna '#popup-edit' jest możliwe nawet Twoją metodą (vide punkt 3). Ale zapoznaj się z tym co Ci viking sugeruje.

[maciek257]

Dziękuję za podpowiedzi. Delegacja zadziałała bezproblemowo.

Miałbym prośbę o jeszcze jedną podpowiedź.

W jaki sposób przekazać do linijek 24-27 (zamiast X) numer wpisu przy którym został kliknięty przycisk Edytuj?

[HTML] pobierz, plaintext 
success: function(response){
 
	table = [];
	values = [];              
 
	for (i = 0; i < response.length; i++){
 
		table[i] = $.map(response[i], function(el){return el});
 
		id = table[i][0];
		title = table[i][1];
		description = table[i][2];
		deadline = table[i][3];
		autor = table[i][7];
 
		values[i] = [id, title, description, deadline];
 
		table[i] = '<div id="task"><h2>'+title+'</h2><p class="content">'+description+'</p><p class="deadline">Termin wykonania: <strong>'+deadline+'</strong></p><p class="deadline">Autor: <strong>'+autor+'</strong></p><button>Edytuj</button></task>';
 
	}
 
	$("#tasks").delegate("button", "click", function(){
		$("#edit").fadeIn();
		$(".edit_id").val(values[X][0]);
		$(".edit_title").val(values[X][1]);
		$(".edit_description").val(values[X][2]);
		$(".edit_deadline").val(values[X][3]);
 
	});
 
	$("#tasks").html(table);
}
[HTML] pobierz, plaintext 

[viking]

Kombinuj z "this". Tylko dlaczego używasz delegate zamiast on? "As of jQuery 3.0, .delegate() has been deprecated"