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

Question

আমি কোডটি যেখানে আমি কোনো পৃষ্ঠায় সব নির্বাচন বক্স মাধ্যমে looping করছি এবং একটি বাঁধাই একটি বিট আছে .hoverতাদের ইভেন্টে তাদের প্রস্থ সঙ্গে twiddling একটি বিট করতে mouse on/off।

এটি পৃষ্ঠায় প্রস্তুত হয় এবং ঠিক কাজ করে।

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

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

Answer 1

JQuery 1.7 হিসাবে আপনার ব্যবহার করা উচিত jQuery.fn.on:

$(staticAncestors).on(eventName, dynamicChild, function() {});

---

এর আগে , প্রস্তাবিত পদ্ধতির ব্যবহার ছিল live():

$(selector).live( eventName, function(){} );

যাইহোক, live()1.7 এর পক্ষে হ্রাস করা হয়েছিল on()এবং 1.9 তে সম্পূর্ণ অপসারণ করা হয়েছিল। live()স্বাক্ষর:

$(selector).live( eventName, function(){} );

... নিম্নলিখিত on()স্বাক্ষর দিয়ে প্রতিস্থাপন করা যেতে পারে :

$(document).on( eventName, selector, function(){} );

---

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

$(document).on('mouseover mouseout', '.dosomething', function(){
    // what you want to happen when mouseover and mouseout 
    // occurs on elements that match '.dosomething'
});

ইভেন্টটি আবদ্ধ হওয়ার সময়ে যে কোনও পিতামাতার উপস্থিত রয়েছে তা ঠিক আছে। উদাহরণ স্বরূপ

$('.buttons').on('click', 'button', function(){
    // do something here
});

প্রয়োগ করা হবে

<div class="buttons">
    <!-- <button>s that are generated dynamically and added here -->
</div>

Comments

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

— স্যাম ডটন

ইভেন্ট প্রতিনিধিদল সম্পর্কে এখানে আরও জানুন: learn.jquery.com/events/event-delegation ।

— ফেলিক্স ক্লিং

খাঁটি জাভাস্ক্রিপ্ট / ভ্যানিলা জেএস দিয়ে এটি সম্পাদন করার কোনও উপায়?

— রাম পাত্র

@ রামস্বরুপ আপনি jQuery এ যা কিছু করতে পারেন তা jQuery ছাড়াই সম্পন্ন করা যায়। এখানে jQuery ছাড়াই ইভেন্ট প্রতিনিধি দলের একটি ভাল উদাহরণ

— ডেভ

@ ডেভ আমি অবাক করেছিলাম যে আপনি যে উত্তরটি নির্দেশ করেছেন তা এখানে তালিকাভুক্ত নয় কেন? এলি স্পষ্টতই যদি সম্ভব হয় তবে কোনও প্লাগইন ছাড়াই সমাধানের জন্য বলেছেন।

— রাম পাত্র

Answer 2

এর ডকুমেন্টেশনে একটি ভাল ব্যাখ্যা রয়েছে jQuery.fn.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());
});

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

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

দ্রষ্টব্য: প্রেরিত ইভেন্টগুলি এসভিজির পক্ষে কাজ করে না ।

Comments

এটি একটি উত্তম স্বীকৃত উত্তর হতে হবে কারণ ডকুমেন্ট থেকে সমস্ত

— উপায়ের

@ সামঞ্জয়: যদিও অনুসন্ধানগুলির উপাদানগুলির কাছাকাছি অবস্থানকে লক্ষ্য করা পছন্দ করা হয়, তবে অনুসন্ধান / গতির পার্থক্য বাস্তবে খুব সামান্য। যে কোনও বিষয় খেয়াল করতে আপনাকে সেকেন্ডে 50,000 বার ক্লিক করতে হবে :)

— কোডিং

এই পদ্ধতির trমতো কোনও উপযুক্ত নির্বাচক, যেমন পরিবর্তিত হয়ে একটি সারিতে চেকবক্স ক্লিকগুলি পরিচালনা করতে প্রয়োগ করা 'input[type=checkbox]'যেতে পারে এবং এটি নতুনভাবে সন্নিবেশ করা সারিগুলির জন্য স্বয়ংক্রিয়ভাবে পরিচালিত হবে?

— জোব্রোকহাউস

ধন্যবাদ! এটি আমার সমস্যার সমাধান করে। এই সাধারণ বক্তব্যটি আমার ইস্যু ছিল, "ইভেন্ট হ্যান্ডলারগুলি কেবলমাত্র নির্বাচিত উপাদানগুলিতে আবদ্ধ; আপনার কোডটি কল করার সময় তাদের অবশ্যই পৃষ্ঠায় উপস্থিত থাকতে হবে ..."

— ডেনিস ফাজাকাস

Answer 3

এটি কোনও লাইব্রেরি বা প্লাগইন ছাড়াই একটি খাঁটি জাভাস্ক্রিপ্ট সমাধান:

document.addEventListener('click', function (e) {
    if (hasClass(e.target, 'bu')) {
        // .bu clicked
        // Do your thing
    } else if (hasClass(e.target, 'test')) {
        // .test clicked
        // Do your other thing
    }
}, false);

যেখানে hasClassহয়

function hasClass(elem, className) {
    return elem.className.split(' ').indexOf(className) > -1;
}

Live demo

ক্রেডিট ডেভ এবং সিম বিদাসে যায়

আরও আধুনিক জেএস ব্যবহার করে hasClassএটি প্রয়োগ করা যেতে পারে:

function hasClass(elem, className) {
    return elem.classList.contains(className);
}

Comments

stackoverflow.com/questions/9106329/...

— zloctb

আপনি ব্যবহার করতে পারেন বিভাজনের পরিবর্তে এলিমেন্ট.ক্লাসলিস্ট

— ইউজেন কনকভ

@EugenKonkov Element.classList পুরানো ব্রাউজারগুলিতে সমর্থিত নয়। উদাহরণস্বরূপ, আইই <9.

— রাম পাত্র

JQuery এর পরিবর্তে ভ্যানিলা স্ক্রিপ্ট ব্যবহার করে কীভাবে জিনিসগুলি সম্পন্ন করা যায় সে সম্পর্কে একটি দুর্দান্ত নিবন্ধ - toddmotto.com/…

— রাম পাত্র

বুদবুদ সম্পর্কে কীভাবে? আপনি যদি আগ্রহী সেই উপাদানটির কোনও সন্তানের উপর ক্লিক ইভেন্টটি ঘটে তবে কী হবে?

— Andreas Trantidis

Answer 4

ইভেন্টগুলি তৈরি করার সময় আপনি ইভেন্টগুলিতে যুক্ত করতে পারেন। যদি আপনি একই সময়ে বিভিন্ন সময়ে একই ইভেন্টগুলি যুক্ত করে থাকেন তবে একটি নামকৃত ফাংশন তৈরি করা যেতে পারে।

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 */ )
;

Answer 5

আপনি কেবলমাত্র আপনার ইভেন্টের বাঁধাই কলকে কোনও ফাংশনে আবদ্ধ করতে পারেন এবং তারপরে এটি দু'বার ডেকে আনতে পারেন: একবার নথিতে প্রস্তুত এবং একবার আপনার ইভেন্টের পরে যা নতুন ডোম উপাদান যুক্ত করে। যদি আপনি এটি করেন যে আপনি বিদ্যমান ইভেন্টগুলিতে একই ইভেন্টটিকে দু'বার বাঁধাই এড়াতে চাইবেন যাতে আপনার প্রয়োজন হয় বিদ্যমান ইভেন্টগুলি আবদ্ধ করা বা (আরও ভাল) কেবল নতুন তৈরি করা DOM উপাদানগুলির সাথে আবদ্ধ হওয়া। কোডটি এরকম কিছু দেখাচ্ছে:

function addCallbacks(eles){
    eles.hover(function(){alert("gotcha!")});
}

$(document).ready(function(){
    addCallbacks($(".myEles"))
});

// ... add elements ...
addCallbacks($(".myNewElements"))

Comments

এই পোষ্টটি সত্যই আমাকে একই ফর্মটি লোড করার সাথে সাথে 1,2,4,8,16 ... জমা দেওয়ার সমস্যাটি বুঝতে সহায়তা করেছে। .Live () ব্যবহার করার পরিবর্তে আমি আমার .লোড () কলব্যাকে .bind () ব্যবহার করেছি। সমস্যা সমাধান. ধন্যবাদ!

— টমাস ম্যাককেবে

Answer 6

.live()পরিবর্তে ব্যবহার করার চেষ্টা করুন .bind(); .live()বাঁধবে .hoverAjax অনুরোধ, executes পরে আপনার চেকবক্সটি করতে।

Comments

পদ্ধতিটি live()1.7 সংস্করণে অনুকৃত হয়েছে onএবং 1.9 সংস্করণে মুছে ফেলা হয়েছে।

— ক্রিদাম

Answer 7

গতিশীলভাবে তৈরি উপাদানগুলিতে ইভেন্টের বাইন্ডিং

একক উপাদান:

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

শিশু উপাদান:

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

যোগ লক্ষ্য করুন *। সেই উপাদানটির সমস্ত শিশুদের জন্য একটি ইভেন্ট ট্রিগার করা হবে।

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

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

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

Comments

ইয়াপ এবং তারা (ডকুমেন্ট.বিডি) বলছে না এর পূর্বপুরুষ যা বলেছেন তা বেশ কিছু হতে পারে

— মেডইনড্রিমস

Answer 8

অন্লিক ইভেন্টের মতো ইভেন্ট এবং হ্যান্ডলারের সাথে উপাদানগুলি (এমনকি নতুন তৈরি হওয়া) বাঁধতে আপনি লাইভ () পদ্ধতিটি ব্যবহার করতে পারেন।

এখানে আমি একটি নমুনা কোড লিখেছি, যেখানে আপনি দেখতে পারেন কীভাবে লাইভ () পদ্ধতিটি নির্বাচিত উপাদানগুলি এমনকি সদ্য তৈরি হওয়া ইভেন্টগুলিকে কীভাবে আবদ্ধ করে:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
    </head>

    <body>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js"></script>

        <input type="button" id="theButton" value="Click" />
        <script type="text/javascript">
            $(document).ready(function()
                {
                    $('.FOO').live("click", function (){alert("It Works!")});
                    var $dialog = $('<div></div>').html('<div id="container"><input type ="button" id="CUSTOM" value="click"/>This dialog will show every time!</div>').dialog({
                                                                                                         autoOpen: false,
                                                                                                         tite: 'Basic Dialog'
                                                                                                     });
                    $('#theButton').click(function()
                    {
                        $dialog.dialog('open');
                        return('false');
                    });
                    $('#CUSTOM').click(function(){
                        //$('#container').append('<input type="button" value="clickmee" class="FOO" /></br>');
                        var button = document.createElement("input");
                        button.setAttribute('class','FOO');
                        button.setAttribute('type','button');
                        button.setAttribute('value','CLICKMEE');
                        $('#container').append(button);
                    });
                    /* $('#FOO').click(function(){
                                                     alert("It Works!");
                                                 }); */
            });
        </script>
    </body>
</html>

Answer 9

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

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

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

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

Comments

নির্বাচকটি $ দ্বারা আবদ্ধ হওয়া উচিত নয়, সুতরাং সঠিক ফর্ম্যাটটি হবে $ (নথি) on। ("ক্লিক করুন", "নির্বাচক", ফাংশন () {// আপনার কোড এখানে});

— অটোপাইলট

selectorভেরিয়েবলের চারপাশে একটি jQuery অবজেক্টটি জড়ো করা অর্থহীন , যখন এটির একটি স্ট্রিং বা এলিমেন্ট অবজেক্ট থাকতে হবে যা আপনি কেবলমাত্র সেই যুক্তিতে সরাসরি যেতে পারেনon()

— ররি ম্যাকক্রসন

Answer 10

আরেকটি সমাধান হ'ল উপাদানটি তৈরি করার সময় শ্রোতাদের যুক্ত করা। শ্রোতাকে শরীরে রাখার পরিবর্তে আপনি শ্রোতাকে যে মুহুর্তে তৈরি করেছেন সেই মুহুর্তে এটি উপাদানটিতে রেখেছেন:

var myElement = $('<button/>', {
    text: 'Go to Google!'
});

myElement.bind( 'click', goToGoogle);
myElement.append('body');


function goToGoogle(event){
    window.location.replace("http://www.google.com");
}

Comments

আপনার কোডে 1 টি ভুল রয়েছে: myElement.append('body');অবশ্যই হবে myElement.appendTo('body');। অন্যদিকে, যদি ভেরিয়েবলের আরও ব্যবহারের প্রয়োজন না হয় তবে myElementএই $('body').append($('<button/>', { text: 'Go to Google!' }).bind( 'click', goToGoogle));

— উপায়টি

Answer 11

এইভাবে চেষ্টা করুন -

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

Answer 12

"মেইন" ক্লাসটি নোট করুন উপাদানটি স্থাপন করা হয়েছে, উদাহরণস্বরূপ,

<div class="container">
     <ul class="select">
         <li> First</li>
         <li>Second</li>
    </ul>
</div>

উপরের দৃশ্যে, jQuery যে মেইনটি দেখবে তা হ'ল "ধারক"।

তারপর আপনি মূলত যেমন ধারক অধীনে উপাদান নাম থাকবে ul, liএবং select:

$(document).ready(function(e) {
    $('.container').on( 'click',".select", function(e) {
        alert("CLICKED");
    });
 });

Answer 13

আপনি ব্যবহার করতে পারেন

$('.buttons').on('click', 'button', function(){
    // your magic goes here
});

অথবা

$('.buttons').delegate('button', 'click', function() {
    // your magic goes here
});

এই দুটি পদ্ধতি সমান তবে পরামিতিগুলির একটি পৃথক ক্রম রয়েছে।

দেখুন: jQuery ডেলিগেট ইভেন্ট

Comments

delegate()এখন অবচয় করা হয়েছে। এটা ব্যবহার করোনা.

— ররি ম্যাকক্রসন

Answer 14

গতিশীলভাবে ব্যবহার করে তৈরি হওয়ার সময় আপনি ইভেন্টকে ইভেন্টের সাথে সংযুক্ত করতে পারেন 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>

Answer 15

এটি ইভেন্ট প্রতিনিধি দ্বারা করা হয় । ইভেন্টটি মোড়ক-শ্রেণির উপাদানকে আবদ্ধ করবে তবে এটি নির্বাচক-শ্রেণীর উপাদানকে দেওয়া হবে। এটা এভাবে কাজ করে.

$('.wrapper-class').on("click", '.selector-class', function() {
    // Your code here
});

বিঃদ্রঃ:

মোড়কের শ্রেণির উপাদানটি প্রাক্তন হতে পারে। নথি, বডি বা আপনার মোড়ক আবরণী ইতিমধ্যে উপস্থিত থাকা উচিত । তবে selectorপৃষ্ঠা লোডিংয়ের সময় অগত্যা উপস্থাপন করার দরকার নেই। এটি পরে আসতে পারে এবং ইভেন্টটি selector ব্যর্থ না হয়ে আবদ্ধ হবে ।

Answer 16

এখানে কেন গতিশীলভাবে তৈরি উপাদানগুলি ক্লিকগুলিতে সাড়া দেয় না:

var body = $("body");
var btns = $("button");
var btnB = $("<button>B</button>");
// `<button>B</button>` is not yet in the document.
// Thus, `$("button")` gives `[<button>A</button>]`.
// Only `<button>A</button>` gets a click listener.
btns.on("click", function () {
  console.log(this);
});
// Too late for `<button>B</button>`...
body.append(btnB);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>A</button>

কার্যকারণ হিসাবে, আপনাকে সমস্ত ক্লিক শুনতে হবে এবং উত্স উপাদানটি পরীক্ষা করতে হবে:

var body = $("body");
var btnB = $("<button>B</button>");
var btnC = $("<button>C</button>");
// Listen to all clicks and
// check if the source element
// is a `<button></button>`.
body.on("click", function (ev) {
  if ($(ev.target).is("button")) {
    console.log(ev.target);
  }
});
// Now you can add any number
// of `<button></button>`.
body.append(btnB);
body.append(btnC);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>A</button>

একে "ইভেন্ট ডেলিগেশন" বলা হয়। সুসংবাদ, এটি jQuery এর একটি অন্তর্নির্মিত বৈশিষ্ট্য :-)

var i = 11;
var body = $("body");
body.on("click", "button", function () {
  var letter = (i++).toString(36).toUpperCase();
  body.append($("<button>" + letter + "</button>"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>A</button>

Answer 17

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

$(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>

Answer 18

ইতিমধ্যে বিদ্যমান একটি পিতামাতার সাথে ইভেন্টটি বাঁধুন:

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

Answer 19

.on()JQuery এর পদ্ধতি ব্যবহার করুন http://api.jquery.com/on/লাইভ উপাদানগুলিতে ইভেন্ট হ্যান্ডলার সংযুক্ত করতে ।

সংস্করণ হিসাবে 1.9 .live()পদ্ধতি সরানো হয়।

Answer 20

আমি ইভেন্ট শ্রোতাদের একটি 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
}

Comments

আমি এই বাস্তবায়ন পছন্দ করি; আমাকে কেবল একটি কল সেট আপ করতে হবে

— উইলিয়াম

Answer 21

উপাদান তৈরি এবং ইভেন্টগুলি বাঁধার জন্য আরও নমনীয় সমাধান ( উত্স )

// creating a dynamic element (container div)
var $div = $("<div>", {id: 'myid1', class: 'myclass'});

//creating a dynamic button
 var $btn = $("<button>", { type: 'button', text: 'Click me', class: 'btn' });

// binding the event
 $btn.click(function () { //for mouseover--> $btn.on('mouseover', function () {
    console.log('clicked');
 });

// append dynamic button to the dynamic container
$div.append($btn);

// add the dynamically created element(s) to a static element
$("#box").append($div);

দ্রষ্টব্য: এটি প্রতিটি উপাদানের জন্য ইভেন্ট হ্যান্ডলার উদাহরণ তৈরি করবে (লুপগুলিতে ব্যবহৃত হলে কার্য সম্পাদনকে প্রভাবিত করতে পারে)

Answer 22

<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>

Comments

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

— পেরেক

Answer 23

আমি গতিশীলভাবে যুক্ত উপাদানগুলিতে সমস্যা ছাড়াই কাজ করার $.bindএবং $.unbindকাজ করার একটি সমাধান খুঁজছিলাম ।

() যেমন ঘটনাগুলি সংযুক্ত করার কৌশলটি তৈরি করে, যাতে আমি যাদের কাছে এসেছি তাদের একটি নকল আনবাইন্ড তৈরি করতে:

const sendAction = function(e){ ... }
// bind the click
$('body').on('click', 'button.send', sendAction );

// unbind the click
$('body').on('click', 'button.send', function(){} );

Comments

আনবাইন্ডিং কাজ করে না, এটি খালি ফাংশনকে নির্দেশ করে এমন আরও একটি ইভেন্ট

— জুড়েছে