JQuery সহ উপাদান সামগ্রী পরিবর্তনগুলি সনাক্ত করুন

113

change() ফাংশন ফর্ম উপাদানগুলিতে পরিবর্তনগুলি সনাক্ত করে এবং এটি সনাক্ত করে, তবে কোনও ডিওএম উপাদানটির সামগ্রী পরিবর্তন করা হয়েছিল তা সনাক্ত করার কোনও উপায় আছে কি?

এটি কোনও #contentফর্ম উপাদান না হলে এটি কাজ করে না

$("#content").change( function(){
    // do something
});

এই জাতীয় কিছু করার সময় আমি এটি ট্রিগার করতে চাই:

$("#content").html('something');

এছাড়াও html()বা append()ফাংশনে কলব্যাক নেই।

কোনও পরামর্শ?

javascript  jquery  dom 
— এলজো ভালুগি
সূত্র
পুরানো প্রশ্ন আমি জানি, তবে একটি উত্তম
— অ্যান্ড্রু অ্যাটকিনসন

উত্তর:

26

এগুলি হল পরিব্যক্তি ঘটনা ।

আমি জিকিউরিতে মিউটেশন ইভেন্ট এপিআই ব্যবহার করি নি, তবে একটি গিরিপথ অনুসন্ধান আমাকে গিটহাবে এই প্রকল্পে নিয়ে গেছে। প্রকল্পের পরিপক্কতা সম্পর্কে আমি অসচেতন।

— jrharshath
সূত্র
17
এই মিউটেশন ইভেন্ট প্লাগইনটি কাজ করবে না, কারণ এটি ইভেন্টগুলিকে কেবল jQuery রূপান্তর পদ্ধতিতে দেখায়। যখন jQuery নিজেই উপাদানগুলিকে পরিবর্তন করার চেষ্টা করে তবে এগুলি বহিস্কার করা হয়, তবে যখন উপাদানগুলি বাইরের jQuery থেকে পরিবর্তিত হয় not তারা দস্তাবেজে পরিবর্তনগুলি দেখে না। পরিবর্তে এই ছোট প্লাগইনটি দেখুন: stackoverflow.com/questions/3233991/jquery-watch-div/…
— সেবাস্তিয়ান গ্রিগনোলি
10
আপনি কখনও চেষ্টা করেননি এমন লাইব্রেরিতে গুগলিং এবং লিঙ্ক পোস্ট করা খুব কার্যকর নয়। (মন্তব্য করা হচ্ছে কারণ আমাকে নিম্নচাপ দিয়ে যাওয়ার বিষয়ে অনুরোধ জানানো হয়েছিল।)
— মনিকা
27
মিউটেশন ইভেন্টগুলি হ্রাস করা হয় ; তাদের ব্যবহার করবেন না।
— ব্রক অ্যাডামস
পরিব্যক্তি ঘটনা বিকল্প হবে বলে মনে হচ্ছে MutationObservers ।
— উড্রোশিগেরু
69

আমি জানি এই পোস্টটি এক বছরের পুরনো, তবে যাদের সমান সমস্যা রয়েছে তাদের জন্য আমি একটি আলাদা সমাধান পদ্ধতির সরবরাহ করতে চাই:

  1. JQuery পরিবর্তন ইভেন্টটি কেবলমাত্র ব্যবহারকারী ইনপুট ক্ষেত্রগুলিতে ব্যবহৃত হয় কারণ যদি অন্য কোনও জিনিস ম্যানিপুলেটেড হয় (যেমন, একটি ডিভি), সেই হেরফেরটি কোড থেকে আসছে। সুতরাং, কোথায় হেরফের হয় তা সন্ধান করুন এবং তারপরে সেখানে আপনার যা যা প্রয়োজন তা যুক্ত করুন।

  2. তবে যদি কোনও কারণে এটি সম্ভব না হয় (আপনি একটি জটিল প্লাগইন ব্যবহার করছেন বা কোনও "কলব্যাক" সম্ভাবনাগুলি খুঁজে পেতে পারেন না) তবে আমার পরামর্শ দেওয়া jQuery পদ্ধতির বিষয়টি হ'ল:

    ক। সাধারণ ডিওএম কারসাজির জন্য, jQuery চেইনিং এবং ট্র্যাভারসিং ব্যবহার করুন,$("#content").html('something').end().find(whatever)....

    খ। আপনি যদি অন্য কিছু করতে চান তবে bindকাস্টম ইভেন্ট এবং এর সাথে jQuery এর নিয়োগ করুনtriggerHandler

    $("#content").html('something').triggerHandler('customAction');

$('#content').unbind().bind('customAction', function(event, data) {
   //Custom-action
});

এখানে jQuery ট্রিগার হ্যান্ডলারটির একটি লিঙ্ক: http://api.jquery.com/triggerHandler/

— কাইলি
সূত্র
1
চূড়ান্ত চিন্তা। যদিও এটি উপরে বেশ বিস্তৃত হওয়া উচিত: আপনি # কনটেন্ট এইচটিএমএলের সাথে একটি লুকানো ইনপুট ক্ষেত্রের মান আপডেট করতে পারেন এবং তারপরে পরিবর্তিত ইভেন্টটিকে লুকানো ইনপুট ক্ষেত্রে আবদ্ধ করতে পারেন :) প্রচুর বিকল্প
— কাইল
7
+1 "কোথায় হেরফের হয় তা সন্ধান করুন এবং তারপরে সেখানে আপনার যা যা প্রয়োজন তা যুক্ত করুন" " কোনও হ্যাক / প্লাগইন ছাড়াই আমার ইস্যুটি 2 সেকেন্ডে স্থির করে রাখুন :)
— হার্টলি ব্রোডি
আমি এখানে পরিবর্তনের প্রস্তাব দিই এটি bindহ্যান্ডলারের প্রত্যাশাটি একটি bool।
— সার্জ সাগান
15

ব্রাউজারটি এর জন্য অনুরুপ ইভেন্টটি চালিত করবে না <div> উপাদানগুলির ।

আমি মনে করি এর পিছনে যুক্তিটি হ'ল জাভাস্ক্রিপ্ট দ্বারা সংশোধিত না হলে এই উপাদানগুলি পরিবর্তন হবে না। যদি আপনাকে ইতিমধ্যে উপাদানটি নিজেই সংশোধন করতে হয় (ব্যবহারকারী এটি করার পরিবর্তে), তবে আপনি ঠিক সেই সময়টিতে উপযুক্ত সংশোধনকারী কোডটি কল করতে পারেন যে আপনি উপাদানটি সংশোধন করেছেন, এইভাবে:

 $("#content").html('something').each(function() { });

আপনি নিজে নিজে কোনও ইভেন্টটিকে আগুনে চালিয়ে দিতে পারেন:

 $("#content").html('something').change();

যদি এই সমাধানগুলির কোনওটিই আপনার পরিস্থিতির জন্য কাজ করে না, আপনি দয়া করে আপনি বিশেষত যেটি সম্পাদন করার চেষ্টা করছেন সে সম্পর্কে আরও তথ্য দিতে পারেন?

— টি এম।
সূত্র
11
এটি ধরে নিয়েছে যে আপনি সমস্ত জাভাস্ক্রিপ্ট লিখেছেন, যা নাও হতে পারে।
— মিস্টার
ধন্যবাদ!!!! এটি আমাকে 6 ঘন্টা ধরে ঘুরে দেখছিলাম এমন একটি সমস্যার সমাধান করতে সহায়তা করেছে।
— জর্ডান পারমার
ঠিক আমার যা প্রয়োজন ছিল।
— smac89
15

http://jsbin.com/esepal/2 সম্পর্কে কি

$(document).bind("DOMSubtreeModified",function(){
  console.log($('body').width() + ' x '+$('body').height());
})

এই ইভেন্টটি মিউটেশন পর্যবেক্ষক এপিআই- এর পক্ষে অবহেলা করা হয়েছে

— fdisk
সূত্র
1
একটি খারাপ ধারণা নয়, যদিও আমি আশ্চর্য হই যে এটির কতটা সমর্থন রয়েছে। বিকাশকারী.মোজিলা.আর.ইন
— ডোম / ডোম_ওয়েভ_প্রেরণা_…
আপনি কীভাবে পরিবর্তনের জন্য একটি নির্দিষ্ট উপাদান পর্যবেক্ষণ করবেন? বর্তমানে ডকুমেন্ট পুরো পৃষ্ঠাটি পর্যবেক্ষণ করে।
— পটোশি パ ト
10

এটি ব্যবহার করে দেখুন, এটি জেমস প্যাডলজি (এসপি তে এখানে জেপি) তৈরি করেছিলেন এবং আপনি যা চান ঠিক তা করে (আমার মনে হয়)

http://james.padolsey.com/javascript/monitoring-dom-properties/

— পিম জাগার
সূত্র
— রাডেক
3

এটি কঠোরভাবে jQuery উত্তর নয় - তবে ডিবাগিংয়ের জন্য উল্লেখ করা দরকারী।

ফায়ারব্যাগে আপনি ডম গাছের একটি উপাদানটিতে ডান-ক্লিক করতে পারেন এবং 'ব্রেক অ্যাট্রিবিউট চেঞ্জ' সেটআপ করতে পারেন:

ফায়ারব্যাগে এলিমেন্ট ডান-ক্লিকের সাথে ব্রেক অন অ্যাট্রিবিউট চেঞ্জ হাইলাইট করা হয়েছে

যখন কোনও স্ক্রিপ্টে কোনও বৈশিষ্ট্য পরিবর্তন করা হয়, তখন ডিবাগ উইন্ডো উপস্থিত হবে এবং এটি কী চলছে তা আপনি ট্র্যাক করতে পারবেন। নীচে উপাদান সন্নিবেশ এবং উপাদান অপসারণের জন্য একটি বিকল্পও রয়েছে (স্ক্রিনগ্রাবের পপআপ দ্বারা অস্পষ্টভাবে অস্পষ্ট)।

— জন রেড
সূত্র
1
এটি সহায়ক, তবে তিনি যা চেয়েছিলেন ঠিক তা নয়। এটি কোনও শ্রেণি পরিবর্তিত হওয়ার সময় বা কোনও শৈলীর বৈশিষ্ট্য যুক্ত বা পরিবর্তিত হওয়ার মতো জিনিসগুলি সনাক্ত করবে। নোডের অভ্যন্তরের বিষয়বস্তুগুলি কখন পরিবর্তন হবে তা এটি যাচাই করবে না। উদাহরণস্বরূপ, যদি কোনও জাভাস্ক্রিপ্ট কোথাও <span> হ্যালো </ span> থেকে <span> ওয়ার্ল্ড </ span> এ নোড পরিবর্তন করে তবে এটি এটি সনাক্ত করতে পারবে না
— জোশুয়া সোইলিউ
2

আমি মুটাবোর ( https://github.com/eskat0n/mutabor ) নামে একটি ছোট জেএস লাইব্রেরি বিকাশ করছি যা ডিওএম মিউটেশন ইভেন্টগুলির ব্যবহার সহজ করার উদ্দেশ্যে to উদাহরণস্বরূপ ডেমো html দেখুন।

— Eskat0n
সূত্র
1

এটি অর্জনের প্রায়শই একটি সহজ এবং কার্যকর উপায় হ'ল আপনি কখন এবং কোথায় ডিওএম সংশোধন করছেন তা ট্র্যাক করা।

আপনি এটি একটি কেন্দ্রীয় ফাংশন তৈরি করে এটি করতে পারেন যা সর্বদা ডিওএম সংশোধন করার জন্য দায়ী। তারপরে আপনি এই ফাংশনটির মধ্য থেকে পরিবর্তিত উপাদানটির জন্য যা প্রয়োজন পরিষ্কার করুন।

সাম্প্রতিক অ্যাপ্লিকেশনটিতে, আমার তাত্ক্ষণিক পদক্ষেপের দরকার নেই তাই আমি হ্যান্ডলি লোড () ফাংশনটির জন্য কোনও কলব্যাক ব্যবহার করেছি, কোনও সংশোধিত উপাদানগুলিতে শ্রেণি যুক্ত করতে এবং তারপরে একটি সেটআইন্টারভাল টাইমার সহ কয়েক সেকেন্ডে সমস্ত পরিবর্তিত উপাদান আপডেট করেছি updated

$($location).load("my URL", "", $location.addClass("dommodified"));

তারপরে আপনি এটি চাইলে পরিচালনা করতে পারেন - যেমন eg

setInterval("handlemodifiedstuff();", 3000); 
function handlemodifiedstuff()
{
    $(".dommodified").each(function(){/* Do stuff with $(this) */});
}
— অ্যান্টনি কারথি
সূত্র
3
এটি ধরে নিয়েছে যে আপনি সমস্ত জাভাস্ক্রিপ্ট লিখেছেন, যা নাও হতে পারে।
— মিস্টার
1

আপনি এইচটিএমএল (বা কোনও) ফাংশনে কলব্যাক বিকল্প যুক্ত করতে পারেন:

$.fn.oldHtml = $.fn.html;
$.fn.html = function(html,fn){
  fn = fn || function(){};
  var result =  this.oldHtml(html);
  fn();
  return result;
};
$('body').html(11,function(){alert("haha");});

এখানে ডেমো।

আপনি কিছু উপাদান পরিবর্তন করেন না, উপাদানটি আপনাকে ধরতে হবে এমন কোনও কিছু দ্বারা পরিবর্তন করতে বাধ্য হয় না।

আমাকে আজ এই সমস্যাটি সমাধান করতে হয়েছিল। আমি কোডটি সম্পাদনা করতে পারিনি যা প্রকৃতপক্ষে এইচটিএমএল () বলে কারণ এটি একটি তৃতীয় পক্ষের লাইব্রেরিতে রয়েছে। এর একটি পরিবর্তিত সংস্করণ আমার জন্য উপযুক্ত। আমি এটি করেছি: f .fn.oldHtml = $ .fn.html (); f .fn.html = ফাংশন (ঙ) result var ফলাফল = this.oldHtml (ই); this.trigger ('afterhtmlChange', e);} এখন আমি নতুন যে কোনও ইভেন্টটি HTML তৈরির পরে তৈরি হওয়া ইভেন্টগুলিকে যে কোনও উপাদানগুলিতে আবদ্ধ করতে পারি, যা যখনই কোনও কিছু jQuery এর এইচটিএমএল () fn কল করে fire
— ড্যানিয়েল হাওয়ার্ড
উফফফফফ, হালকা ভুল উপরে আমার মন্তব্যে Fn হওয়া উচিত: ফাংশন (e) result var ফলাফল = this.oldHtml (ই); this.trigger ( 'afterHtmlChange', ঙ); প্রত্যাবর্তনের ফলাফল;}
— ড্যানিয়েল হাওয়ার্ড
0

আমি একটি স্নিপেট লিখেছিলাম যা কোনও ইভেন্টের উপাদানগুলির পরিবর্তনের জন্য পরীক্ষা করবে।

সুতরাং আপনি যদি তৃতীয় পক্ষের জাভাস্ক্রিপ্ট কোড বা অন্য কিছু ব্যবহার করছেন এবং আপনি যখন ক্লিক করেছেন তখন কখন কিছু উপস্থিত হয় বা পরিবর্তন হয় তা আপনার জানতে হবে তবে আপনি এটি করতে পারেন।

নীচের স্নিপেটের জন্য, বলুন যে আপনি যখন কোনও বোতামটি ক্লিক করার পরে কোনও টেবিলের সামগ্রী পরিবর্তন হবে তখন আপনাকে জানতে হবে।

$('.button').live('click', function() {

            var tableHtml = $('#table > tbody').html();
            var timeout = window.setInterval(function(){

                if (tableHtml != $('#table > tbody').
                    console.log('no change');
                } else {
                    console.log('table changed!');
                    clearInterval(timeout);
                }

            }, 10);
        });

সুডোকোড:

  • একবার আপনি একটি বোতাম ক্লিক করুন
  • আপনি যে উপাদানটির পরিবর্তনের প্রত্যাশা করছেন তার এইচটিএমএল ধরা পড়ে
  • তারপরে আমরা ক্রমাগত উপাদানটির এইচটিএমএল পরীক্ষা করি
  • যখন আমরা এইচটিএমএল আলাদা হতে পাই আমরা চেকিং বন্ধ করি
— অ্যান্ড্রু অ্যাটকিনসন
সূত্র
0

আমরা মিউটেশন ইভেন্টগুলি ব্যবহার করে এটি অর্জন করতে পারি । Www.w3.org এর মতে, মিউটেশন ইভেন্ট মডিউলটি কোনও নথির কাঠামোর কোনও পরিবর্তনের বিজ্ঞপ্তি অনুমোদনের জন্য তৈরি করা হয়েছে, এতে অ্যাটর এবং পাঠ্য পরিবর্তন রয়েছে। আরও বিশদের জন্য মিউটেশন ইভেন্টগুলি

উদাহরণ স্বরূপ :

$("body").on('DOMSubtreeModified', "#content", function() {
    alert('Content Modified'); // do something
});
— সংচিত গুপ্ত
সূত্র
এটি কিছু সময়ের জন্য অবচয় করা হয়েছে। কেউ মিউটেশন পর্যবেক্ষক (একই ধারণা) ব্যবহার করা উচিত
— Carles Alcolea
-3

সম্ভব নয়, আমি বিশ্বাস করি ie একটি বিষয়বস্তু পরিবর্তিত ইভেন্ট আছে তবে এটি অবশ্যই এক্স ব্রাউজার নয়

আমি কি বলি যে পটভূমিতে কিছু বাজে বিরতি ছাড়াই সম্ভব নয়!

— লাল চত্বর
সূত্র
21
অসম্ভব কিছু নেই!
— jrharshath
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.