javascript ইভেন্ট গতিশীলভাবে তৈরি উপাদান উপর বাঁধাই?





11 Answers

on() এর ডকুমেন্টেশন একটি ভাল ব্যাখ্যা আছে।

সংক্ষেপে:

ইভেন্ট হ্যান্ডলার শুধুমাত্র নির্বাচিত নির্বাচিত উপাদান শুধুমাত্র আবদ্ধ হয়; আপনার কোডটি .on() এ কল করার সময় পৃষ্ঠায় বিদ্যমান থাকা আবশ্যক।

সুতরাং নিম্নলিখিত উদাহরণে #dataTable tbody tr কোডটি তৈরি হওয়ার আগে বিদ্যমান থাকা আবশ্যক।

$("#dataTable tbody tr").on("click", function(event){
    console.log($(this).text());
});

যদি নতুন এইচটিএমএল পৃষ্ঠায় ইনজেকশন করা হয় তবে পরবর্তী ইভেন্ট হিসাবে ইভেন্ট ইভেন্ট হ্যান্ডলার সংযুক্ত করার জন্য নির্ধারিত ইভেন্টগুলি ব্যবহার করা আরও ভাল।

দায়িত্বপ্রাপ্ত ইভেন্টগুলির সুবিধা রয়েছে যে তারা পরবর্তী সময়ে নথিতে যোগ করা উত্তরসূরি উপাদানগুলি থেকে ইভেন্টগুলি প্রক্রিয়া করতে পারে। উদাহরণস্বরূপ, যদি টেবিলটি বিদ্যমান থাকে তবে ক্রমগুলি কোড ব্যবহার করে গতিশীলভাবে যুক্ত করা হয় তবে নিম্নলিখিতটি পরিচালনা করবে:

$("#dataTable tbody").on("click", "tr", function(event){
    console.log($(this).text());
});

বংশধর উপাদানের এমন ঘটনাগুলির পরিচালনা করার ক্ষমতা ছাড়াও, যা এখনও তৈরি করা হয় নি, প্রত্যয়িত ইভেন্টগুলির অন্য সুবিধাটি অনেক কম উপরিভাগের জন্য তাদের সম্ভাব্যতা যখন অনেক উপাদান পর্যবেক্ষণ করা আবশ্যক। তার টেবিলে 1000 সারি সহ একটি ডেটা টেবিলে, প্রথম কোড উদাহরণটি হ্যান্ডলারটিকে 1,000 টি উপাদানগুলিতে সংযুক্ত করে।

একটি প্রতিনিধি-ইভেন্ট পদ্ধতির (দ্বিতীয় কোড উদাহরণ) একটি ইভেন্ট হ্যান্ডলারকে শুধুমাত্র একটি উপাদান, গোষ্ঠীর সাথে tbody এবং ইভেন্টটিকে শুধুমাত্র একটি স্তরের বুদ্বুদ করতে হবে (ক্লিক করা tbody থেকে tbody )।

দ্রষ্টব্য: ডিভিডেড ইভেন্টগুলি SVG জন্য কাজ SVG

javascript jquery events unobtrusive-javascript

আমার একটি কোড আছে যেখানে আমি একটি পৃষ্ঠায় সমস্ত নির্বাচিত বাক্সের মাধ্যমে লুপ করছি এবং mouse on/off তাদের প্রস্থের সাথে কিছুটা বিদীর্ণ করার জন্য একটি .hover ইভেন্টটি বাঁধাই mouse on/off

এই পৃষ্ঠা প্রস্তুত এবং ঠিক সূক্ষ্ম কাজ করে।

আমার সমস্যাটি হল যে প্রাথমিক লুপের পরে আমি যেকোনো নির্বাচন বাক্স অ্যাজ্যাক্স বা DOM এর মাধ্যমে যুক্ত করে ইভেন্টটি আবদ্ধ করব না।

আমি এই প্লাগিনটি ( jQuery লাইভ ক্যুইরি প্লাগইন ) খুঁজে পেয়েছি, কিন্তু প্লাগইন দিয়ে আমার পৃষ্ঠাগুলিতে আরও 5k যোগ করার আগে, আমি দেখতে চাই যে কেউ এটি করার উপায় জানেন কিনা, jQuery এর সাথে সরাসরি বা অন্য কোন বিকল্পের মাধ্যমে।




আপনি যখন তৈরি করেন তখন আপনি বস্তুর ইভেন্টগুলি যোগ করতে পারেন। আপনি একই সময়ে বিভিন্ন ইভেন্টে একই ইভেন্ট যুক্ত করলে, নামযুক্ত ফাংশন তৈরি করার উপায় হতে পারে।

var mouseOverHandler = function() {
    // Do stuff
};
var mouseOutHandler = function () {
    // Do stuff
};

$(function() {
    // On the document load, apply to existing elements
    $('select').hover(mouseOverHandler, mouseOutHandler);
});

// This next part would be in the callback from your Ajax call
$("<select></select>")
    .append( /* Your <option>s */ )
    .hover(mouseOverHandler, mouseOutHandler)
    .appendTo( /* Wherever you need the select box */ )
;



.bind() পরিবর্তে .live() ব্যবহার করার চেষ্টা করুন; .live() আবদ্ধ হবে। অ্যাজ্যাক্স অনুরোধ .hover করার পরে আপনার চেকবক্সে রাখুন।




ইভেন্ট গতিশীলভাবে তৈরি উপাদান উপর বাঁধাই

একক উপাদান:

$(document.body).on('click','.element', function(e) {  });

শিশু উপাদান:

 $(document.body).on('click','.element *', function(e) {  });

যোগ * নোটিশ। একটি ঘটনা যে উপাদান সব শিশুদের জন্য ট্রিগার করা হবে।

আমি লক্ষ্য করেছি যে:

$(document.body).on('click','.#element_id > element', function(e) {  });

এটা আর কাজ করছে না, কিন্তু আগে কাজ করছিল। আমি গুগল CDN থেকে jQuery ব্যবহার করছি, কিন্তু আমি জানি না তারা এটি পরিবর্তন করেছে কিনা।




আমি নির্বাচক ব্যবহার করে পছন্দ করি এবং আমি নথিতে এটি প্রয়োগ করি।

এটি নথিতে নিজেই আবদ্ধ এবং পৃষ্ঠা লোডের পরে উপস্থাপিত উপাদানগুলিতে প্রযোজ্য হবে।

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

$(document).on("click", $(selector), function() {
    // Your code here
});



যখন আপনি jQuery(html, attributes) ব্যবহার করে গতিশীলভাবে তৈরি করেন তখন আপনি উপাদানটিতে ইভেন্ট সংযুক্ত করতে পারেন।

JQuery 1.8 অনুসারে , কোনও jQuery ইনস্ট্যান্স পদ্ধতি ( jQuery.fn একটি পদ্ধতি) দ্বিতীয় প্যারামিটারে প্রেরিত বস্তুর সম্পত্তি হিসাবে ব্যবহার করা যেতে পারে:

function handleDynamicElementEvent(event) {
  console.log(event.type, this.value)
}
// create and attach event to dynamic element
jQuery("<select>", {
    html: $.map(Array(3), function(_, index) {
      return new Option(index, index)
    }),
    on: {
      change: handleDynamicElementEvent
    }
  })
  .appendTo("body");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>




ইভেন্টটি আবদ্ধ হওয়ার সময় উপস্থিত কোনও প্যারেন্ট নেই এবং যদি আপনার পৃষ্ঠাটি ক্রমান্বয়ে বর্গের নামের বোতাম সহ উপাদান তৈরি করে তবে আপনি ইভেন্টটিকে একটি পিতামাতার সাথে যুক্ত করবেন যা ইতিমধ্যে বিদ্যমান

$(document).ready(function(){
  //Particular Parent chield click
  $(".buttons").on("click","button",function(){
    alert("Clicked");
  });  
  
  //Dynamic event bind on button class  
  $(document).on("click",".button",function(){
    alert("Dymamic Clicked");
  });
  $("input").addClass("button");  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="buttons">
  <input type="button" value="1">
  <button>2</button>
  <input type="text">
  <button>3</button>  
  <input type="button" value="5">  
  </div>
<button>6</button>




এই মত চেষ্টা করুন -

$(document).on( 'click', '.click-activity', function () { ... });



ঘটনাটি ইতিমধ্যেই বিদ্যমান এমন পিতা-মাতার কাছে বদ্ধ করুন:

$(document).on("click", "selector", function() {
    // Your code here
});



আমি একটি document স্তর ইভেন্ট শ্রোতা স্ক্রিপ্টিং এর পরিবর্তে একটি মডুলার ফাংশন ফ্যাশনে ইভেন্ট শ্রোতা স্থাপন করা পছন্দ। সুতরাং, আমি নীচের মত না। মনে রাখবেন, আপনি একই ইভেন্ট শ্রোতার সাথে একটি উপাদানকে সদস্যতা ত্যাগ করতে পারবেন না তাই একজন শ্রোতাকে একাধিক বার সংযুক্ত করার বিষয়ে চিন্তা করবেন না - শুধুমাত্র একটি লাঠি।

var iterations = 4;
var button;
var body = document.querySelector("body");

for (var i = 0; i < iterations; i++) {
    button = document.createElement("button");
    button.classList.add("my-button");
    button.appendChild(document.createTextNode(i));
    button.addEventListener("click", myButtonWasClicked);
    body.appendChild(button);
}

function myButtonWasClicked(e) {
    console.log(e.target); //access to this specific button
}




<html>
    <head>
        <title>HTML Document</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    </head>

    <body>
        <div id="hover-id">
            Hello World
        </div>

        <script>
            jQuery(document).ready(function($){
                $(document).on('mouseover', '#hover-id', function(){
                    $(this).css('color','yellowgreen');
                });

                $(document).on('mouseout', '#hover-id', function(){
                    $(this).css('color','black');
                });
            });
        </script>
    </body>
</html>



Related