JQuery .appendসম্পূর্ণরূপে সম্পন্ন হওয়ার পরে কোনও ফাংশনটি কীভাবে কল করবেন ?
এখানে একটি উদাহরণ:
$("#root").append(child, function(){
// Action after append is completly done
});
সমস্যা: যখন একটি জটিল ডিওএম কাঠামো সংযুক্ত করা হয়, অ্যাপেন্ড ফাংশন কলব্যাকের মধ্যে মূল উপাদানটির নতুন আকারের গণনা ভুল। অনুমানগুলি হ'ল যে ডিওএম এখনও সম্পূর্ণরূপে লোড হয় নি, যুক্ত জটিল ডিওএমের মধ্যে কেবল প্রথম শিশু।
উত্তর:
আপনি এখানে অনেক বৈধ উত্তর পেয়েছেন তবে এগুলির কোনওটি কেন এটির মতো কাজ করে তা আপনাকে সত্যিই বলে দেয় না।
জাভাস্ক্রিপ্টে কমান্ডগুলি একবারে একবারে কার্যকর করা হয়, সিঙ্ক্রোনিকভাবে তারা যে ক্রম আসে ততক্ষণ আপনি যদি স্পষ্টভাবে টাইমআউট বা ব্যবধান ব্যবহার করে অ্যাসিনক্রোনাস হওয়ার কথা না বলেন।
এর অর্থ হল যে আপনার .appendপদ্ধতিটি কার্যকর করা হবে এবং সেই পদ্ধতিটি কাজ শেষ না করা পর্যন্ত অন্য কোনও কিছুই (কোনও সম্ভাব্য সময়সীমার বা অন্তরগুলির উপস্থিতি উপেক্ষা করা) কার্যকর করা হবে।
সংক্ষিপ্তসার হিসাবে, কলব্যাকের দরকার নেই যেহেতু সুসংগতভাবে .appendচালানো হবে।
যদিও মার্কাস একওয়াল অ্যাপেন্ডের সংলগ্নতার সম্পর্কে একদম সঠিক, তবে আমি এটিও দেখতে পেয়েছি যে প্রতিকূল পরিস্থিতিতে কখনও কখনও কোডের পরবর্তী লাইনটি চলার সময় ব্রাউজার দ্বারা ডিওএম পুরোপুরি রেন্ডার হয় না।
এই পরিস্থিতিতে তারপরে স্যাডডিভার সমাধানগুলি সঠিক লাইনের পাশাপাশি রয়েছে।
$('#root')
.append(html)
.ready(function () {
// enter code here
});
ঠিক আছে আমি আকার পুনঃসংযোগ সঙ্গে ঠিক একই সমস্যা পেয়েছি এবং মাথা ব্যথার কয়েক ঘন্টা পরে আমাকে .append()কঠোরভাবে সিনক্রোনাস আচরণের সাথে একমত হতে হবে না । ওয়েল অন্তত গুগল ক্রোমে। নিম্নলিখিত কোড দেখুন।
var input = $( '<input />' );
input.append( arbitraryElement );
input.css( 'padding-left' );
প্যাডিং-বাম সম্পত্তি ফায়ারফক্সে সঠিকভাবে পুনরুদ্ধার করা হয়েছে তবে এটি ক্রোমে খালি। আমি মনে করি অন্যান্য সিএসএসের বৈশিষ্ট্যগুলির মতো। কিছু পরীক্ষা-নিরীক্ষার পরে আমাকে setTimeout()10 এমএস বিলম্বের সাথে সিএসএস 'গেটর' মোড়ানোর জন্য নিষ্পত্তি করতে হয়েছিল যা আমি জানি যে নরক হিসাবে ইউজিলি তবে ক্রোমে কাজ করা একমাত্র কাজ। আপনার কারও যদি এই ধারণাটি আরও ভালভাবে সমাধান করতে হয় তবে আমি খুব কৃতজ্ঞ হব।
.ready()আরও ভাল এবং আরও মার্জিত সমাধান ব্যবহার করে।
আমি এখানে সমস্ত উত্তর অবাক ...
এটা চেষ্টা কর:
window.setTimeout(function() { /* your stuff */ }, 0);
0 সময়সীমা নোট করুন। এটি একটি স্বেচ্ছাসেবী সংখ্যা নয় ... যেমন আমি বুঝতে পেরেছি (যদিও আমার বোঝাটি কিছুটা নড়বড়ে হতে পারে), দুটি জাভাস্ক্রিপ্ট ইভেন্টের সারি রয়েছে - একটি ম্যাক্রো ইভেন্টের জন্য এবং একটি মাইক্রো ইভেন্টের জন্য। "বৃহত্তর" স্কোপযুক্ত সারিটি এমন কাজগুলি ধারণ করে যা ইউআই (এবং ডিওএম) আপডেট করে, অন্যদিকে মাইক্রো সারি দ্রুত-টাস্ক টাইপ ক্রিয়াকলাপ সম্পাদন করে।
এছাড়াও বুঝতে পারেন যে একটি সময়সীমা নির্ধারণ করা গ্যারান্টি দেয় না যে কোডটি নির্দিষ্ট মানটিতে ঠিক পারফর্ম করে। এটি যা করে তা হ'ল মূলত ফাংশনটিকে উচ্চতর কাতারে রাখে (যেটি ইউআই / ডিওএম পরিচালনা করে) এবং নির্দিষ্ট সময়ের আগে এটি চালায় না।
এর অর্থ হল যে 0 এর টাইমআউট সেট করা জাভাস্ক্রিপ্টের ইভেন্ট সারির UI / DOM- অংশে রাখে, পরবর্তী সম্ভাব্য সুযোগে চালানো হবে।
এর অর্থ হ'ল ডিওএম পূর্ববর্তী সমস্ত সারি আইটেমগুলির সাথে আপডেট হয় (যেমন এর মাধ্যমে $.append(...);, োকানো হয় এবং যখন আপনার কোড চালায়, তখন ডিওএম সম্পূর্ণ উপলব্ধ থাকে is
(পিএস - আমি জাভাস্ক্রিপ্ট নিনজা সিক্রেটস থেকে শিখেছি - একটি দুর্দান্ত বই: https://www.manning.com/books/secrets-of-the- জাভাস্ক্রিপ্ট- নিনজা )
setTimeout()কেন না জেনে বছর ধরে যুক্ত করে আসছি । ব্যাখ্যার জন্য ধন্যবাদ!
আমার আরও একটি বৈকল্পিক রয়েছে যা কারও পক্ষে কার্যকর হতে পারে:
$('<img src="http://example.com/someresource.jpg">').load(function() {
$('#login').submit();
}).appendTo("body");
...on('load', function(){ ... এখানে দেখুন: stackoverflow.com/a/37751413/2008111
আমি একই সমস্যা জুড়ে এসেছি এবং একটি সহজ সমাধান খুঁজে পেয়েছি। অ্যাপেন্ড ফাংশনটি একটি ডকুমেন্ট প্রস্তুত কল করার পরে যুক্ত করুন।
$("#root").append(child);
$(document).ready(function () {
// Action after append is completly done
});ব্যবহার MutationObserverjQuery appendপদ্ধতিতে কলব্যাকের মতো কাজ করতে পারে :
আমি এটি অন্য একটি প্রশ্নে ব্যাখ্যা করেছি এবং এবার আমি কেবল আধুনিক ব্রাউজারগুলির জন্য উদাহরণ দেব:
// Somewhere in your app:
var observeDOM = (() => {
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
return function(obj, callback){
if( MutationObserver ){
// define a new observer
var obs = new MutationObserver(function(mutations, observer){
if( mutations[0].addedNodes.length || mutations[0].removedNodes.length )
callback(mutations);
});
// have the observer observe foo for changes in children
obs.observe( obj, { childList:true, subtree:true });
return obs;
}
}
})();
//////////////////
// Your code:
// setup the DOM observer (on the appended content's parent) before appending anything
observeDOM( document.body, ()=>{
// something was added/removed
}).disconnect(); // don't listen to any more changes
// append something
$('body').append('<p>foo</p>');
আমি মনে করি এটির সঠিক উত্তর দেওয়া হয়েছে তবে এটি "সাবচিল্ড_উইথ_এসআইজেড" পরিচালনা করার ক্ষেত্রে কিছুটা সুনির্দিষ্ট (
$("#root").append(
$('<div />',{
'id': 'child'
})
)
.children()
.last()
.each(function() {
$(this).append(
$('<div />',{
'id': $(this).parent().width()
})
);
});
$.when($('#root').append(child)).then(anotherMethod());
$.whenকেবলমাত্র সেই অবজেক্টগুলির জন্যই কাজ করে যাদের প্রত্যাবর্তনের প্রতিশ্রুতি
anotherMethod().. এটি কলব্যাক হিসাবে পাস হচ্ছে না।
জকিউরি অ্যাপেন্ড ফাংশনটি একটি jQuery অবজেক্ট প্রদান করে যাতে আপনি কেবল শেষে কোনও পদ্ধতি ট্যাগ করতে পারেন
$("#root").append(child).anotherJqueryMethod();
সবচেয়ে সহজ উপায় এটি ধাপে ধাপে করা। প্রতিটি উপাদানের মাধ্যমে ক্ষতিকারক করতে প্রতিটি ফানসিটন ব্যবহার করুন। এই উপাদানটি যুক্ত হওয়ার সাথে সাথেই সেই উপাদানটি প্রক্রিয়া করার জন্য এটি পরবর্তী কার্যক্রমে প্রেরণ করুন।
function processAppended(el){
//process appended element
}
var remove = '<a href="#">remove</a>' ;
$('li').each(function(){
$(this).append(remove);
processAppended(this);
});
মোবাইল ডিভাইসগুলির জন্য HTML5 কোড করার সময় আমি এই সমস্যার মুখোমুখি হয়েছি। কিছু ব্রাউজার / ডিভাইস সংমিশ্রণের ফলে ত্রুটি ঘটায় কারণ .append () পদ্ধতিটি DOM- র পরিবর্তনগুলি তাত্ক্ষণিকভাবে প্রতিফলিত করে না (জেএস ব্যর্থ হতে পারে)।
এই পরিস্থিতির জন্য দ্রুত এবং মলিন সমাধানটি ছিল:
var appint = setInterval(function(){
if ( $('#foobar').length > 0 ) {
//now you can be sure append is ready
//$('#foobar').remove(); if elem is just for checking
//clearInterval(appint)
}
}, 100);
$(body).append('<div>...</div><div id="foobar"></div>');
হ্যাঁ আপনি যে কোনও ডিওএম সন্নিবেশে একটি কলব্যাক ফাংশন যুক্ত করতে পারেন :
জিকুয়েরি ডকুমেন্টেশন পরীক্ষা করুন: http://api.jquery.com/append/
$myDiv.append( function(index_myDiv, HTML_myDiv){
//....
return child
})
এবং এখানে একটি বাস্তব, অনুরূপ উদাহরণ রয়েছে:
http://www.w3schools.com/jquery/ tryit.asp? ফাইলের নাম = tryjquery_html_prepend_func
.prepend()পদ্ধতিটি প্রতিস্থাপন করে : ২ para ("পি") এর সাহায্যে 2 য় প্যারামিটারটি পরীক্ষা করতে পারেন prep > "+ পিএইচটিএমএল +" </ i> \ ") <b> এর ইনডেক্স" + n + "</ b> রয়েছে" "
আমি সম্প্রতি একটি অনুরূপ সমস্যার মধ্যে দৌড়ে। আমার জন্য সমাধানটি ছিল নতুন করে তৈরি করা tion আমাকে প্রদর্শন করার চেষ্টা করুন:
var $element = $(selector);
$element.append(content);
// This Doesn't work, because $element still contains old structure:
$element.fooBar();
// This should work: the collection is re-created with the new content:
$(selector).fooBar();
আশাকরি এটা সাহায্য করবে!
জিকুরিতে আপনি আপনার সংযোজনের ঠিক পরে ব্যবহার করতে পারেন
$(function(){
//code that needs to be executed when DOM is ready, after manipulation
});
$ () এমন একটি ফাংশন কল করে যা হয় হয় একটি ডম-রেডি কলব্যাক নিবন্ধন করে (যদি কোনও ফাংশন এটিতে পাঠানো হয়) বা ডিওএম থেকে উপাদানগুলি ফেরত দেয় (যদি কোনও নির্বাচক স্ট্রিং বা উপাদান এতে পাঠানো হয়)
আপনি এখানে
jQuery
http://api.jquery.com/ तैयार/ এ $ এবং $ () এর মধ্যে আরও পার্থক্য খুঁজে পেতে পারেন
আমি জানি এটি সর্বোত্তম সমাধান নয়, তবে সেরা অনুশীলন:
$("#root").append(child);
setTimeout(function(){
// Action after append
},100);
$('#root').append(child);
// do your work here
সংযোজনে কলব্যাক নেই, এবং এটি কোড যা সিঙ্ক্রোনালি কার্যকর করে - এটি সম্পন্ন হওয়ার কোনও ঝুঁকি নেই
$('#root').append(child).anotherMethod();
append()খুব অল্প সময় লাগে।