আমি কীভাবে কোনও অভ্যন্তরীণ এইচটিএমএল-তে ক্লিক ইভেন্টটি পেতে পারি?

Question

আমি এই বিন্যাসটি গতিশীলভাবে তৈরি হয়েছিল:

for (let i = 1; i < 10; i++) {
  document.querySelector('.card-body').innerHTML += `<div class="row" id="img_div">
        <div class="col-12 col-sm-12 col-md-2 text-center">
          <img src="http://placehold.it/120x80" alt="prewiew" width="120" height="80">
        </div>
        <div id="text_div" class="col-12 text-sm-center col-sm-12 text-md-left col-md-6">
        <h4 class="name"><a href="#" id="title` + i + `">Name</a></h4>
          <h4>
            <small>state</small>
          </h4>
          <h4>
            <small>city</small>
          </h4>
          <h4>
            <small>zip</small>
          </h4>
        </div>
        <div class="col-12 col-sm-12 text-sm-center col-md-4 text-md-right row">
        </div>
      </div>
     `
  document.getElementById("title" + i).addEventListener('click', function() {
    console.log(i)
  });
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="card-body">
  <!-- person -->
</div>

এবং আমি ইভেন্টটি প্রতিটিটিতে ক্লিক করতে h4 class="name"এবং iসম্পর্কিত নম্বর সহ একটি লগ প্রদর্শন করতে চাই ।

তবে, console.logকেবলমাত্র শেষ iসম্পর্কিত সম্পর্কিত ( i=9এই ক্ষেত্রে) দেখায় এবং অন্যান্য iসংখ্যার সাথে কাজ করে না । কেন এমন হয়? আমাকে কি করতে হবে?

Comments

সম্ভবত এইচটিএমএল-স্ট্রিং পাস করার পরিবর্তে ডকুমেন্ট.ক্রেটএলিমেন্ট () ব্যবহার করুন এবং আপনার আরও সহজ সময় হবে এবং আমার মনে হয় আপনি শেষ পর্যন্ত আরও ভাল কোড দিয়ে শেষ করবেন।

— adcfajn

আপনাকে আবার আপনার নোডের মধ্য দিয়ে লুপ করতে হবে এবং কোনও ইভেন্ট সংযুক্ত করতে হবে যা আপনি স্ট্রিংয়ের সাথে সংযুক্ত করতে পারবেন না

— ইউজেন সানিক

দুর্দান্ত প্রশ্ন, এটা নিশ্চিতভাবেই জটিল, আমি মনে করি কোনও ইভেন্ট পোস্টের রেন্ডারিং সংযুক্ত করা সম্ভব হতে পারে .. উদাহরণস্বরূপ আপনার forলুপটি সেই উপাদানগুলিতে ইভেন্টগুলি প্রয়োগ করার জন্য কোনও পদ্ধতি কল করার পরে , তবে আমি জানি না। jsFizz পরীক্ষা করতে হবে।

— পোগ্রিন্ডিস

এর জন্য একটি প্রতিনিধি ইভেন্ট হ্যান্ডলার তৈরি করে .card-bodyএবং উপাদান ( target) উপাদানটি একটি অ্যাঙ্কর এবং আইডি দিয়ে শুরু হয় কিনা তা পরীক্ষা করুন title।

— হাঙ্গারস্টার

আহ, ঠিক একটি উত্তর পোস্ট করতে। পুনরায় খুলতে ভোট দিয়েছেন। বন্ধ করার দরকার নেই, সমস্যাটি innerHTML += ...পূর্বের সেট ইভেন্ট শ্রোতাদের হত্যা করছে, বন্ধের নয়। document.createElementপরিবর্তে ব্যবহার করুন। এই থ্রেডটি

— ggorlen

Answer 1

innerHTMLপূর্ণ এইচটিএমএল পুনরায় আঁকুন, ফলস্বরূপ পূর্ববর্তী সমস্ত সংযুক্ত ইভেন্টগুলি হারিয়ে গেছে। ব্যবহারinsertAdjacentHTML()

for(let i=1;i<10;i++){
    document.querySelector('.card-body').insertAdjacentHTML('beforeend',`<div class="row" id="img_div">
        <div class="col-12 col-sm-12 col-md-2 text-center">
          <img src="http://placehold.it/120x80" alt="prewiew" width="120" height="80">
        </div>
        <div id="text_div" class="col-12 text-sm-center col-sm-12 text-md-left col-md-6">
        <h4 class="name"><a href="#" id="title`+i+`">Name</a></h4>
          <h4>
            <small>state</small>
          </h4>
          <h4>
            <small>city</small>
          </h4>
          <h4>
            <small>zip</small>
          </h4>
        </div>
        <div class="col-12 col-sm-12 text-sm-center col-md-4 text-md-right row">
        </div>
      </div>
     `);
   document.getElementById("title"+i).addEventListener('click', function () {
    console.log(i)
  });
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="card-body">
<!-- person -->
</div>

Comments

বাহ .. আমি সিমুলার জিনিসগুলি নিয়ে ঘোরাঘুরি করেছি এবং একবারে কখনই আসেনি insertAdjacentHTML- Everydays a schoolday, সত্যিই দুর্দান্ত।

— পোগ্রিন্ডিস

খুব দুর্দান্ত এবং +1, তবে এটি document.getElementByIdএইচটিএমএল যুক্ত করার পরে অবিলম্বে ব্যবহার করা ব্যয়বহুল এবং অপ্রয়োজনীয় বলে মনে হচ্ছে । আপনি যদি কয়েকশ উপাদান যুক্ত করে থাকেন তবে এটি প্রচুর ট্র্যাভার্সিংয়ের কাজ।

— ggorlen

@ggorlen আমি কৌতূহল ছাড়াই পারফেক্ট এরিয়াতে সম্মত হই যে ক্লাসটি ব্যবহার করে nameএবং ইভেন্টটিকে কেবল সেই শ্রেণীর সাথে সংযুক্ত করে যখন উপাদানটি দিয়ে যাচ্ছেন (বা সম্ভবত কেবল ইভেন্ট থেকে পড়া) আরও দক্ষ হবে?

— পোগ্রিন্ডিস

নিশ্চিত না. আসল ব্যবহারের উপর নির্ভর করে - আমার পরামর্শ অকালীন অপ্টিমাইজেশন হতে পারে। আপনাকে প্রোফাইল / বেঞ্চমার্ক করে দেখতে হবে। তবে যদি document.createElementব্যবহার করা যায় তবে আমি মনে করি এটিই সর্বোত্তম বেইসলাইন পদ্ধতির। এই পোস্টে আর একটি সম্ভাব্য উন্নতি হ'ল দুটি লুপ ব্যবহার করা: একটিতে সমস্ত এইচটিএমএল তৈরি করা, তারপরে অন্যটি একটি document.querySelectorAllকলে একটি ক্লাস ব্যবহার করে সমস্ত উপাদানকে ধরে ফেলতে এবং ইভেন্ট শ্রোতাদের যুক্ত করে।

— ggorlen

অবশ্যই একটি মানদণ্ডের মূল্যবান, আমি আজ রাতের চেয়ে ভাল কিছু করতে পারি না! :)

— পোগ্রিন্ডিস

Answer 2

ব্যবহার +=উপর innerHTMLএইচটিএমএল ভিতরে উপাদানে ধ্বংস ঘটনা শ্রোতারা। এটি করার সঠিক উপায়টি হ'ল ব্যবহার করা document.createElement। এখানে একটি ন্যূনতম, সম্পূর্ণ উদাহরণ:

for (let i = 1; i < 10; i++) {
  const anchor = document.createElement("a");
  document.body.appendChild(anchor);
  anchor.id = "title" + i;
  anchor.href= "#";
  anchor.textContent = "link " + i;
  document.getElementById("title" + i)
    .addEventListener("click", e => console.log(i));
}

a {
  margin-left: 0.3em;
}

অবশ্যই, document.getElementByIdএখানে প্রয়োজনীয় নয় যেহেতু আমরা কেবল লুপ ব্লকে বস্তুটি তৈরি করেছি। এটি সম্ভাব্য ব্যয়বহুল গাছের পদচারণা বাঁচায়।

for (let i = 1; i < 10; i++) {
  const anchor = document.createElement("a");
  document.body.appendChild(anchor);    
  anchor.href= "#";
  anchor.textContent = "link " + i;
  anchor.addEventListener("click", e => console.log(i));
}

a {
  margin-left: 0.3em;
}

আপনার উদাহরণ হিসাবে যেমন স্ট্রিংফাইড এইচটিএমএল এর স্বেচ্ছাসেবী খণ্ডগুলি থাকে তবে আপনি এটি ব্যবহার করতে পারেন createElement("div"), এটি innerHTMLএকবারে সেট করতে পারেন এবং প্রয়োজনীয় শ্রোতাদের যোগ করতে পারেন । তারপরে ডিভগুলি আপনার ধারক উপাদানটির সন্তান হিসাবে সংযোজন করুন।

for (let i = 1; i < 10; i++) {
  const rawHTML = `<div><a href="#" id="link-${i}">link ${i}</a></div>`;
  const div = document.createElement("div");
  document.body.appendChild(div);
  div.href= "#";
  div.innerHTML = rawHTML;
  div.querySelector(`#link-${i}`)
    .addEventListener("click", e => console.log(i));
}

Comments

এটি আমি বিবেচনা করছি এমন পদ্ধতির, এবং আমি এই সমাধানটি দেবো, তবে অন্য উত্তরটিও দুর্দান্ত।

— পোগ্রিন্ডিস

জবাব দেওয়ার জন্য ধন্যবাদ, তবে আমি ক্রিয়েট এলিমেন্ট দিয়ে লেআউটটি তৈরির চেষ্টা করেছি এবং আমি ব্যর্থ হয়েছিলাম

— লুইজ অ্যাডর্নো

সমস্যা নেই. আশা রাখি, আপনি বুঝতে পারছি আপনি HTML- এর একটি বড় খণ্ড আছে, আপনি একটি মত একটি মূল উপাদান ধারক তৈরি করতে পারেন <div>, তারপর div.innerHTML += yourHugeChunkOfHTML। সুতরাং এটি কোনও ব্যবহারের ক্ষেত্রে কাজ না করার কোনও কারণ নেই।

— ggorlen

আমি আপনার প্রস্তাবনা দিয়ে এই বিন্যাসটি তৈরির চেষ্টা করব, আমি "ডকুমেন্ট.জেটলেটমেন্টবাইআইডি" ব্যবহার করে বেশ কয়েকবার ব্যবহার করতে এবং

— কর্মক্ষেত্রে