JavaScript හි නව අංග සඳහා සිද්ධිය සකස් කිරීම

අපට ලැයිස්තුවක් ul සහ බොත්තමක් ඇතැයි සිතන්න:

<ul>
	<li>item</li>
	<li>item</li>
	<li>item</li>
	<li>item</li>
	<li>item</li>
</ul>

<button>add</button>

අපගේ අංග අදාළ විචල්යවලට ලබා ගනිමු:

let button = document.querySelector('button');
let list   = document.querySelector('ul');
let items  = list.querySelectorAll('li');

ඕනෑම li එකක් මත ක්ලික් කිරීමෙන් එයට අවසානයේ හ惊叹 සංකේතය එකතු වන පරිදි කරමු:

for (let item of items) {
	item.addEventListener('click', function() {
		this.textContent = this.textContent + '!';
	});
}

දැන් බොත්තම මත ක්ලික් කිරීමෙන් ලැයිස්තුවේ අවසානයට නව li එකක් එකතු වන පරිදි කරමු:

button.addEventListener('click', function() {
	let item = document.createElement('li');
	item.textContent = 'item';
	list.appendChild(item);
});

කෙසේ වෙතත්, අපට ගැටලුවක් ඇත: නවතම එකතු කළ li මත ක්ලික් කිරීම අවසානයේ හ惊叹 සංකේතය එකතු වීමට හේතු නොවේ. එහි හේතුව නම්, අපි ක්ලික් සිද්ධිය සකස් කරන්නේ ආරම්භයේ පැවති ඒවාට පමණක් වන නමුත් නව ඒවාට නොවේ.

නව li මත ක්ලික් සිද්ධිය සකස් කිරීමෙන් ගැටලුව නිරාකරණය කරමු:

button.addEventListener('click', function() {
	let item = document.createElement('li');
	item.textContent = 'item';
	
	item.addEventListener('click', function() { // ක්ලික් සිද්ධිය සකස් කිරීම
		this.textContent = this.textContent + '!';
	});
	
	list.appendChild(item);
});

කෙසේ වෙතත්, දැන් ශ්‍රිතය-සිද්ධිය සකස් කිරීමේ කේතය අනුපිටපත් කර ඇත ස්ථාන දෙකක - මුලදී පැවති li සහ නව ඒවා සඳහා. මෙය නිරාකරණය කර, එය වෙනම ශ්‍රිතයකට ගෙන යමු:

function handler() {
	this.textContent = this.textContent + '!';
}

කේත අනුපිටපත් කිරීම වළක්වා ගැනීම සඳහා අපගේ ශ්‍රිතය භාවිතා කරමු:

for (let item of items) {
	item.addEventListener('click', handler);
}

button.addEventListener('click', function() {
	let item = document.createElement('li');
	item.textContent = 'item';
	
	item.addEventListener('click', handler);
	
	list.appendChild(item);
});

පොදුවේ ගත් කල, කාර්යය විසඳා ඇති අතර අපි ශ්‍රිතය-සිද්ධිය සකස් කිරීමේ කේත අනුපිටපත් කිරීම වළක්වා ගෙන ඇත. කෙසේ වෙතත්, සිද්ධි සකස් කිරීම අපට සිදු කිරීමට සිදුවන්නේ ස්ථාන දෙකකින්: පවතින li සඳහා චක්‍රයේදී, සහ බොත්තම මත ක්ලික් කිරීමේදී. ඊළඟ පාඩමේදී, මෙම අපහසුතාවයෙන් මිදීමේ ක්‍රමය අපි විමසා බලමු.