मुझे एंकर टैग के साथ एक समस्या है, मैं अपनी एचटीएमएल टेबल को jQuery के साथ भरता हूं और एक टीडी के अंदर एंकर टैग होता है जब मैं इसके फ़ंक्शन को कॉल करने के बजाय उस पर क्लिक करता हूं तो यह पृष्ठ को रीफ्रेश करता है:

$('.show-directions').click(function( event ) {
  event.preventDefault();
  $('.ui.modal').modal('show');
  setTimeout(function() {
    initMap();
  }, 500); 
});

function initMap(){
  console.log("initMap has been called.");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<a class="show-directions" href="">Detail</a>
0
Mehdi Ammar 4 अप्रैल 2018, 20:33

3 जवाब

मैंने कुछ और किया

<a class="show-directions" href="javascript:tacos();" >

और मैंने फंक्शन टैकोस को कॉल किया जिसने वही काम किया है

function tacos () {
        $('.ui.modal').modal('show');
        setTimeout(function() {

            initMap();
        }, 2000);
    }
0
Mehdi Ammar 4 अप्रैल 2018, 18:27

जैसा कि आप देख सकते हैं (आपके प्रश्न में मेरे संपादन के बाद), यह मानते हुए कि आपने बूटस्ट्रैप लाइब्रेरी को ठीक से संदर्भित किया है, आपका कोड उसी तरह काम कर रहा है जैसे उसे करना चाहिए। इसलिए आपकी समस्या पृष्ठ पर किसी और चीज़ के साथ होनी चाहिए।

आपने संकेत दिया है कि आप a तत्व को .append() के साथ गतिशील रूप से जोड़ रहे हैं। इस मामले में, तत्व को दस्तावेज़ में जोड़ने से पहले click ईवेंट हैंडलर पंजीकृत किया जा रहा है। यह सुनिश्चित करने के लिए कि इसे प्रबंधित किया जाता है, "event प्रतिनिधिमंडल", जो दस्तावेज़ में एक उच्च स्तर के तत्व (जो घटना पंजीकरण के समय मौजूद है) पर ईवेंट हैंडलर स्थापित करने की प्रक्रिया है और फिर जब घटना को बाद में निचले स्तर के तत्व द्वारा शुरू किया जाता है, तो ईवेंट बबलिंग का कारण बनता है यह उच्च तत्व पर पहुंचने के लिए। फिर आप यह देखने के लिए जांचते हैं कि किस तत्व ने घटना शुरू की है।

यह सब कहने के बाद, आपको इसके लिए सबसे पहले a का उपयोग नहीं करना चाहिए। <a> तत्व नेविगेशन के लिए हैं, जावास्क्रिप्ट में हुक के लिए नहीं। गैर-नेविगेशनल कार्यों के लिए हाइपरलिंक का उपयोग करना शब्दार्थ की दृष्टि से गलत है। यह उन उपयोगकर्ताओं के लिए समस्याएँ पैदा करेगा जो वेब सर्फ करने के लिए सहायक तकनीकों (जैसे स्क्रीन रीडर) का उपयोग करते हैं, और (जैसा कि आप पहले से ही जानते हैं, आपका कोड दिया गया है) आपको event.preventDefault() जोड़कर नेविगेट करने की ब्राउज़र की मूल इच्छा को अक्षम करना होगा।

इसके बजाय अपने फ़ंक्शन को ट्रिगर करने के लिए किसी अन्य तत्व का उपयोग करें, जैसे span तत्व:

// Intercept the event at the document level, but check to see if
// it originated with an element that has the .show-direcions class
$(document, '.show-directions').click(function( event ) {
  $('.ui.modal').modal('show');
  setTimeout(function() {
    initMap();
  }, 500);
});

function initMap(){
  console.log("initMap has been called.");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<span class="show-directions">Detail</span>
0
Scott Marcus 4 अप्रैल 2018, 18:56

इसे स्क्रिप्ट में जोड़ें $(function(){$("#AnchorTagID").click(function(){return false;});}); या <button type='button'>Add Anchor Attributes here<button/> का उपयोग करें

या इसके बजाय आप खाली href के बजाय href="#" जोड़ सकते हैं या इसे वहां से पूरी तरह हटा सकते हैं।

-1
Narendra Selot 4 अप्रैल 2018, 18:35