मैं पत्रक पॉपअप के भीतर एक बटन बनाना चाहता हूं, जिस पर क्लिक करने पर यह बिंदु के स्थान पर ज़ूम इन करेगा। मैंने pointToLayer() फ़ंक्शन के भीतर बटन और उसके ईवेंट को परिभाषित किया है। जब क्लिक किया जाता है तो बटन प्रतिक्रिया नहीं देता है, और जब मैं वेब ब्राउज़र में डेवलपर टूल की जांच करता हूं तो कोई त्रुटि रिपोर्ट नहीं की जाती है। क्या सही नहीं है?
कोड

var controllayer = L.geoJSON(JSON.parse(response), {pointToLayer: function(feature, latlng){

 //popup information
    var str = "<h7>" + "<b>Old Control Name: </b>" + feature.properties.controlname1 + "</h7><br>";
    str += "<h7>" + "<b>New Control Name: </b>" + feature.properties.controlname2 + "</h7><hr>";
    str += "<h7>" + "<b>Northing: </b>" + feature.properties.northing + "</h7><br>";
    str += "<h7>" + "<b>Easting: </b>" + feature.properties.easting + "</h7><hr>";
    str += "<button id = 'zoomto' class = 'btn btn-primary center-block'>Zoom In</button>";

 //event for the defined button
   $("#zoomto").click(function(){
     mymap.setView([latlng.lat, latlng.lng], 17);
    });
 return L.marker(latlng).bindPopup(str);
}}).addTo(mymap);

मैंने सर्वर से बिंदु डेटा लोड करने के लिए, अजाक्स में एक सफलता समारोह के अंदर "नियंत्रक" को परिभाषित किया।
संपूर्ण अजाक्स कोड खंड इस तरह दिखता है,

$.ajax({
          url:'load_control.php',
          success:function(response){

          var controllayer = L.geoJSON(JSON.parse(response), {pointToLayer: function(feature, latlng){

              //popup information
              var str = "<h7>" + "<b>Old Control Name: </b>" + feature.properties.controlname1 + "</h7><br>";
              str += "<h7>" + "<b>New Control Name: </b>" + feature.properties.controlname2 + "</h7><hr>";
              str += "<h7>" + "<b>Northing: </b>" + feature.properties.northing + "</h7><br>";
              str += "<h7>" + "<b>Easting: </b>" + feature.properties.easting + "</h7><hr>";
              str += "<button id = 'zoomto' class = 'btn btn-primary center-block'>Zoom In</button>";

              //event for the defined button
              $("#zoomto").click(function(){
                  mymap.setView([latlng.lat, latlng.lng], 17);
              });

              return L.marker(latlng).bindPopup(str);
          }}).addTo(mymap);
          mymap.fitBounds(controllayer.getBounds());

      }
     });
1
AsaEmm 22 मई 2019, 12:02

1 उत्तर

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

समस्या बस यह है कि क्लिक ईवेंट को बाध्य करने के समय, "ज़ूमटो" की आईडी वाले पृष्ठ पर कोई तत्व नहीं है।

यदि आप दस्तावेज़ से जुड़ते हैं और "#zoomto" क्वेरी चयनकर्ता के साथ ईवेंट फ़िल्टर करते हैं तो आपको वांछित व्यवहार मिलेगा।

//event for the defined button
$(document).on("click","#zoomto",function() {
    mymap.setView([latlng.lat, latlng.lng], 17);
});

जैसा कि Ghybs द्वारा इंगित किया गया है कि किसी ईवेंट को DOM ट्री को बबल अप करने और एक पैरेंट DOM नोड पर हैंडल करने की अनुमति देने की अवधारणा जिसे हम प्रतिनिधि के लिए चुनते हैं उसे इवेंट डेलिगेशन कहा जाता है।

यह अवधारणा आपके चुने हुए पुस्तकालय (jQuery) के लिए विशिष्ट नहीं है; लेकिन यहां एक jQuery फ्लेवर्ड इवेंट डेलिगेशन ट्यूटोरियल है: https://learn.jquery.com/events /घटना-प्रतिनिधिमंडल/

2
BlueWater86 22 मई 2019, 20:50