AJAX की सहायता से टेबल के भीतर टेबल और बटन बनाना और लाना।

लाए गए टेबल का बटन काम नहीं करता है। मैं बटन से संबंधित कोई क्रिया नहीं देख सकता कंसोल पर क्लिक करें। बटन के काम न करने का क्या कारण हो सकता है?

बटन निर्माण के लिए कोड संरचना:

for (var i = 0; i < finishedExams.length; i++) {
  document.getElementById('FEtemplate').innerHTML += '<tr><th>' + (i + 1) + '</th><td>' + result + '</td><td>' + title + '</td><td>' + et + '</td><td>' + humanized_time_span(date) + '</td><td><button type="button" class="btn btn-sm btn-alt-primary sendButtonData" data-qr-exam-id="' + id + '"> Send</button></div></td></tr>';
}

बटन क्लिक के लिए संबंधित कोड संरचना:

$('.sendButtonData').click(function () { 
        /* AJAX POST code here.. */
        if (response.status == true) {
            /* some codes */
        } else {
            /* some codes */
        }
    });

मैंने क्या प्रयास किया है?

$('body').on('click', '.sendButtonData', function(){

यह कोड काम करता है लेकिन इसे तालिका के पहले भाग की आईडी के साथ प्राप्त करता है। अन्य सभी बटन ऐसे कार्य करते हैं जैसे वे तालिका की पहली पंक्ति के लिए काम कर रहे हों।

साथ ही, मैंने बटन प्रकार को "बटन" से "सबमिट" में बदल दिया। फिर से, कुछ भी नहीं बदला।

2
Emre8 8 नवम्बर 2020, 08:37

1 उत्तर

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

मुझे लगता है कि आपने उन बटनों को बनाने से पहले ईवेंट श्रोता को ".sendButtonData" तत्वों से जोड़ दिया है, जब आप उनमें से किसी एक पर क्लिक करते हैं तो कुछ भी नहीं होता है क्योंकि घटना उस वर्ग के नाम के साथ मौजूदा तत्वों से जुड़ी होती है जो इस मामले में कोई नहीं है, लेकिन नहीं भविष्य के लिए

$('.sendButtonData').click(function () { 
  console.log("button click!");
});

for (var i = 0; i < 5; i++) {
  document.getElementById('FEtemplate').innerHTML += '<tr><th>' + (i + 1) + '</th><td>' + " some result " + '</td><td>' + " some title " + '</td><td>' + " some et " + '</td><td>' + " some date " + '</td><td><button type="button" class="btn btn-sm btn-alt-primary sendButtonData" data-qr-exam-id="' + " some id " + '"> Send</button></div></td></tr>';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="FEtemplate"></div>

तो आपको उस श्रोता को इस तरह के बटन बनाने के बाद संलग्न करना होगा

for (var i = 0; i < 5; i++) {
  document.getElementById('FEtemplate').innerHTML += '<tr><th>' + (i + 1) + '</th><td>' + " some result " + '</td><td>' + " some title " + '</td><td>' + " some et " + '</td><td>' + " some date " + '</td><td><button type="button" class="btn btn-sm btn-alt-primary sendButtonData" data-qr-exam-id="' + " some id " + '"> Send</button></div></td></tr>';
}

$('.sendButtonData').click(function () { 
  console.log("button click!");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="FEtemplate"></div>

या आप इस तरह घटना प्रतिनिधिमंडल का उपयोग कर सकते हैं

$('#FEtemplate').click(function(e) { 
  // only if the element has that class `sendButtonData`
  // note that in this case we're not checking for the element type to be a button
  if(e.target.className.includes("sendButtonData")) {
    console.log("button click!");
  }
});

for (var i = 0; i < 5; i++) {
  document.getElementById('FEtemplate').innerHTML += '<tr><th>' + (i + 1) + '</th><td>' + " some result " + '</td><td>' + " some title " + '</td><td>' + " some et " + '</td><td>' + " some date " + '</td><td><button type="button" class="btn btn-sm btn-alt-primary sendButtonData" data-qr-exam-id="' + " some id " + '"> Send</button></div></td></tr>';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="FEtemplate"></div>
0
SaymoinSam 8 नवम्बर 2020, 09:01