मैंने हाल ही में मस्ती के लिए जावास्क्रिप्ट के साथ खेलना शुरू कर दिया है। मैंने स्वयं को अधिकांश w3schools ट्यूटोरियल (jquery ofc सहित) के माध्यम से काम किया।

जिस बिंदु पर मैं फंस गया वह बस एक बटन के एक क्लिक पर एक फ़ंक्शन को कॉल कर रहा है।

मेरा कोड (न्यूनतम, पूर्ण और सत्यापन योग्य उदाहरण प्रदान करने के लिए संपादित)

$("#linkId1").on("click", function(){

  setTimeout(function(){

  function decryptText() {
  alert( "decrypted!" );
  }

  $("tableId").append('<a id="decryptID" class="button">decrypt</a>');
  $("#decryptID").on("click", decryptText);

  }, 500);
});

एचटीएमएल:

<a id="linkId1">firstLink</a>

<table>
 <tbody>
  <tr>
   <td id="tableId">
    <a id="button1" class="button"></a>
    <a id="button2" class="button"></a>
   </td>
  </tr>
 </tbody>
</table>

यहाँ मैंने पहले ही कोशिश कर ली है:

  • फ़ंक्शन को कॉल करने के विभिन्न तरीके
  • फ़ंक्शन को डिक्रिप्ट करना टेक्स्ट () वैश्विक या स्थानीय

  • - इसे बनाने के बाद बटन में eventListener जोड़ना (क्योंकि मैंने एक अन्य पोस्ट पर पढ़ा है कि eventListener का उपयोग करना बेहतर है HTML-टैग में onclick विशेषता डालने के बजाय)। ~मैंने मिश्रित यहां jQuery विधियों के साथ मूल जेएस - बड़ी गलती।

ब्राउज़र कंसोल मुझे कोई त्रुटि नहीं देता - जब मैंने कोड को थोड़ा बदल दिया, तो मुझे मिला: Reference Error: decryptText() not defined

एस।

संपादित करें: मैंने इसे केवल jQuery, चयनकर्ताओं और ईवेंट हैंडलिंग में करने का प्रयास किया।

जैसा कि आप देख सकते हैं, मैंने उदाहरण कोड को एक साधारण एन्क्रिप्ट और डिक्रिप्ट स्क्रिप्ट की शुरुआत में बदल दिया - मूल समस्या अभी भी वही रहती है।

Firefox के निरीक्षक उपकरण से जाँच करने पर, इस बार तत्व के पास कोई घटना नहीं है।

संभवतः एक महत्वपूर्ण जानकारी यह है कि जिस तालिका को आप HTML में देख सकते हैं वह onclick ajax handler से पहले मौजूद नहीं है, तत्व #linkId1 से कॉल की जाती है और HTML में तालिकाओं वाले पूरे div को सम्मिलित करता है।

3
Sonorius 29 अगस्त 2017, 14:39

3 जवाब

सबसे बढ़िया उत्तर

मैं आपकी समस्या का एक वैकल्पिक समाधान प्रदान करने जा रहा हूं। यदि आप तालिका में जोड़ने से पहले तत्व को पूरी तरह से jQuery के रूप में बनाते हैं तो आप इसे फिर से ढूंढने के बिना सीधे क्लिक ईवेंट को बाध्य कर सकते हैं:

var newA = $('<a\>').addClass('button').text('decrypt');
newA.on("click", decryptText);
$("#tableId").append(newA);

$('<a\>') आपके द्वारा DOM में जोड़ने से पहले एक वैरिएबल के रूप में DOM एलीमेंट बनाएगा। आपके वर्तमान कोड पर यहां मुख्य लाभ यह है कि यह गारंटी देगा कि वह क्लिक उस <a> टैग के लिए बाध्य है, भले ही आपके पास एक ही टेक्स्ट (decrypt) के साथ कई तत्व हों। मैं मुख्य रूप से ऐसा इसलिए कह रहा हूं क्योंकि आप जिस चयनकर्ता का उपयोग करते हैं ".button:contains('decrypt')" वह बहुत अस्पष्ट है और उन चीजों से मेल खा सकता है जिनकी आप अपेक्षा नहीं करते हैं या यदि आप एक ही कोड को दो बार चलाते हैं तो ईवेंट हैंडलर को दो बार बांधता है।

एक अन्य विकल्प प्रतिनिधिमंडल का उपयोग करके घटनाओं को बबल करना है:

$("#tableId").on('click', '.button', decryptText);

ईवेंट हैंडलर अब स्टैटिक आइटम tableId के लिए बाध्य है, लेकिन यह उन ईवेंट को सुन रहा है जो अंतर्निहित वर्ग button से मेल खाते हैं। यह यहां व्यापक रूप से कवर किया गया है गतिशील रूप से बनाए गए तत्वों पर ईवेंट बाइंडिंग?

उपरोक्त के साथ आप खुशी-खुशी कई नए <a> जोड़ सकते हैं क्योंकि आप इस ज्ञान में सुरक्षित होना चाहते हैं कि ईवेंट बाइंडिंग पहले से ही निपटाई जा चुकी है, यानी आपको निर्माण पर ईवेंट को बाध्य करने की आवश्यकता नहीं है।

1
Liam 30 अगस्त 2017, 12:13

मैंने इसे सुलझा लिया! (Cbroe और Se0ng11 के लिए धन्यवाद)

पहले कोड:

$("#tableId").append('<a id="decryptID" class="button">decrypt</a>');
$("#decryptID").on("click", decryptText);

इसके बाद कोड:

$("#tableId").append('<a class="button">decrypt</a>');
$(".button:contains('decrypt')").on("click", decryptText);

समस्या स्थिर आईडी द्वारा बनाई गई थी जिसे मैंने लाइन 1 में हाइपरलिंक तत्व मैं संलग्न () को सौंपा था। आईडी को हटाने और लाइन 2 में jQuery चयनकर्ता को बदलने से काम चल गया!

2
Sonorius 30 अगस्त 2017, 12:09

इसे आज़माएं, आप कुछ चीजों को याद कर रहे थे, $(document).ready(function () {} और $("tableId").append(...); को # $("#tableId").append(...); का उपयोग करना चाहिए क्योंकि tableId तत्व की आईडी है न कि तत्व की। यह W3c के साथ भी काम करेगा, ऐसा नहीं है कि आपको इसका उपयोग नहीं करना चाहिए क्योंकि आप शुरुआत कर रहे हैं। आप कहीं भी उपयोग कर सकते हैं।

$(document).ready(function () {
         $("#linkId1").on("click", function () {
         setTimeout(function () {
         function decryptText() {alert("decrypted!");
         }
         $("#tableId").append('<a id="decryptID" class="button">decrypt</a>');
         $("#decryptID").on("click", decryptText);}, 500);});
         });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table><tr><td>
      <a id="linkId1">firstLink</a></td>
    </tr>
        <tr><td id="tableId">
            <a id="button1" class="button"></a>
            <a id="button2" class="button"></a>
            </td>
        </tr>
 </table>
-1
Liam 30 अगस्त 2017, 12:28