गतिशील रूप से निर्मित तत्वों पर इवेंट बाइंडिंग?

Question

मेरे पास एक बिट कोड है जहां मैं एक पृष्ठ पर सभी चुनिंदा बक्से के माध्यम से लूपिंग कर रहा हूं और एक .hoverइवेंट को उन पर अपनी चौड़ाई के साथ थोड़ा सा चक्कर लगाने के लिए बांध रहा हूं mouse on/off।

यह पेज तैयार पर होता है और ठीक काम करता है।

मेरे पास समस्या यह है कि प्रारंभिक लूप के बाद जो भी चुनिंदा बॉक्स मैं अजाक्स या डोम के माध्यम से जोड़ूंगा, वह ईवेंट बाउंड नहीं होगा।

मुझे यह प्लगइन मिल गया है ( jQuery Live Query Plugin ), लेकिन इससे पहले कि मैं एक प्लगइन के साथ अपने पृष्ठों में 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 ।

— फेलिक्स क्लिंग

शुद्ध जावास्क्रिप्ट / वेनिला js के साथ इसे पूरा करने का कोई तरीका?

— राम पात्रा

@Ramswaroop कुछ भी आप jQuery में कर सकते हैं बिना jQuery के पूरा किया जा सकता है। यहाँ jQuery के बिना घटना प्रतिनिधिमंडल का एक अच्छा उदाहरण है

— डेव

@ मुझे आश्चर्य है कि आपके द्वारा बताया गया उत्तर यहां सूचीबद्ध क्यों नहीं है। एली ने स्पष्ट रूप से यदि संभव हो तो बिना किसी प्लगइन के समाधान के लिए कहा है।

— राम पात्रा

Answer 2

के प्रलेखन में एक अच्छी व्याख्या है jQuery.fn.on।

संक्षेप में:

इवेंट हैंडलर केवल वर्तमान में चयनित तत्वों के लिए बाध्य हैं; जिस समय आपका कोड कॉल करता है, उस समय उन्हें पृष्ठ पर मौजूद होना चाहिए .on()।

इस प्रकार निम्नलिखित उदाहरण #dataTable tbody trमें कोड उत्पन्न होने से पहले मौजूद होना चाहिए।

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

यदि नया HTML पेज में इंजेक्ट किया जा रहा है, तो एक घटना हैंडलर संलग्न करने के लिए प्रत्यायोजित घटनाओं का उपयोग करना बेहतर है, जैसा कि आगे वर्णित है।

प्रत्यायोजित घटनाओं से यह लाभ होता है कि वे बाद के समय में दस्तावेज़ में जोड़े जाने वाले वंश तत्वों से घटनाओं को संसाधित कर सकते हैं। उदाहरण के लिए, यदि तालिका मौजूद है, लेकिन पंक्तियों को गतिशील रूप से कोड का उपयोग करके जोड़ा जाता है, तो निम्नलिखित इसे संभाल लेंगे:

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

वंशज तत्वों पर घटनाओं को संभालने की उनकी क्षमता के अलावा, जो अभी तक नहीं बने हैं, प्रत्यायोजित घटनाओं का एक और फायदा बहुत कम ओवरहेड के लिए उनकी क्षमता है जब कई तत्वों की निगरानी की जानी चाहिए। इसमें 1,000 पंक्तियों के साथ एक डेटा टेबल पर tbody, पहला कोड उदाहरण एक हैंडलर को 1,000 तत्वों से जोड़ता है।

एक प्रतिनिधि-ईवेंट दृष्टिकोण (दूसरा कोड उदाहरण) एक ईवेंट हैंडलर को केवल एक तत्व से जोड़ता है tbody, और ईवेंट को केवल एक स्तर (क्लिक की trगई tbody) से बबल अप करने की आवश्यकता होती है ।

नोट: प्रत्यायोजित घटनाएँ एसवीजी के लिए काम नहीं करती हैं ।

Comments

यह एक बेहतर स्वीकार किया गया उत्तर होगा क्योंकि यह दस्तावेज़ से सभी तरह के बजाय विशिष्ट तालिका से प्रतिनिधि करने के लिए तेज़ होगा (खोज क्षेत्र बहुत छोटा होगा)

— msanjay

@msanjay: हालांकि खोज को तत्वों के करीब लक्षित करना पसंद किया जाता है, लेकिन अभ्यास में खोज / गति अंतर बहुत मामूली है। आपको कुछ भी नोटिस करने के लिए 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

इसका श्रेय दवे और सीम विद को जाता है

अधिक आधुनिक JS का उपयोग करके, hasClassइसे निम्न प्रकार से लागू किया जा सकता है:

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

Comments

stackoverflow.com/questions/9106329/…

— zloctb

आप विभाजन के बजाय Element.classList का उपयोग कर सकते हैं

— Eugen Konkov

@EugenKonkov Element.classListपुराने ब्राउज़रों पर समर्थित नहीं है। उदाहरण के लिए, IE <9.

— राम पत्र

JQuery के बजाय वेनिला स्क्रिप्ट का उपयोग करके चीजों को प्राप्त करने का एक अच्छा लेख - toddmotto.com/…

— राम पात्रा

कैसे बुदबुदाती है? यदि आपके द्वारा रुचि रखने वाले तत्व के बच्चे पर क्लिक इवेंट हुआ तो क्या होगा?

— एंड्रियास ट्रैंटिडिस

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 अनुरोध कार्यान्वित करने के बाद अपने चेकबॉक्स को।

Comments

विधि live()1.7 के पक्ष में संस्करण 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) {  });

यह कोई और काम नहीं कर रहा है, लेकिन यह पहले काम कर रहा था। मैं Google CDN से jQuery का उपयोग कर रहा हूं , लेकिन मुझे नहीं पता कि क्या उन्होंने इसे बदल दिया है।

Comments

येप और वे नहीं कह रहे हैं (डॉक्यूमेंट.बॉडी) इसका कहना है कि पूर्वज विच बहुत कुछ हो सकता है

— MadeInDreams

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

— ddlab

Answer 11

इस तरह आजमाएं -

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

Answer 12

"MAIN" श्रेणी पर ध्यान दें, तत्व को रखा गया है, उदाहरण के लिए,

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

1.8 jQuery के रूप में , किसी भी 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

कोई भी पी arent जो उस समय होता है जब घटना बाध्य होती है और यदि आपका पेज डायनामिक रूप से क्लास नाम बटन के साथ तत्वों का निर्माण कर रहा है, तो आप ईवेंट को उस माता-पिता के साथ बाँध देंगे जो पहले से मौजूद है

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

हालांकि यह कोड स्निपेट समस्या को हल कर सकता है, यह इस बात की व्याख्या नहीं करता है कि यह प्रश्न का उत्तर क्यों या कैसे देता है। कृपया अपने कोड के लिए एक स्पष्टीकरण शामिल करें, क्योंकि यह वास्तव में आपके पोस्ट की गुणवत्ता में सुधार करने में मदद करता है। याद रखें कि आप भविष्य में पाठकों के लिए प्रश्न का उत्तर दे रहे हैं, और उन लोगों को आपके कोड सुझाव के कारणों का पता नहीं चल सकता है।

— 11

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

Unbinding काम नहीं करता है, यह बस एक और घटना को जोड़ता है जो एक खाली कार्य को इंगित करता है ...

— फेबियन बिगलर