Is there a way to attach event listeners to raw HTML that has been imported using code?

Question

Is there a way to attach event listeners to raw HTML that has been imported using code?

I'm facing a challenge with importing SVG code embedded in an HTML file and using the v-html directive to render it. The issue is that I need to attach click events to the anchor tags within that imported file, which are not part of my main template.

Is there a way to retrieve all the anchor tags from the imported file?
And how can I bind events to these elements without relying on the v-on directive?

The template structure:

            <v-flex mt-2 px-0 xs6 
                    ref="map_svg"
                    v-html="mapHTML">
            </v-flex>

Excerpt from the imported file:

<svg>
  <g>
     <g>
        <a target="_blank" xlink:href="url to a subsite" >
            <!-- content path which shows a circle -->
         </a>
     </g>
     <g>
        <a target="_blank" xlink:href="url to a differnt subsite" >
            <!-- content path which shows a circle -->
         </a>
     </g>

     <!-- additional similar elements as shown above -->
  </g>
</svg>

I want to add a click event to these anchor tags and either remove or change the xlink:href attribute so that they don't open new tabs in the browser upon clicking.

Edit

This was the solution I implemented:

  mounted() {

    const that = this;
    const links = this.$el.querySelectorAll('#map_svg svg > g > g > a');

    links.forEach(el => {
      const url = el.getAttribute('xlink:href');
      if (url) {
        // el.addEventListener('click', that.stationClick(url));
        el.onclick = function (){
          that.stationClick(url);
        }
        el.removeAttribute('xlink:href');
      }
      el.removeAttribute('target');
    });
  },

javascript vue.js

Answer 1

Answer №1

Once your SVG has been properly loaded, you can set up click event listeners on the elements within it:

export default {
  name: "App",
  data() {
    return {
      svgContent: null
    };
  },
  methods: {
    async loadSvg() {
      // Load your SVG content here
      this.svgContent = `
        <a href="https://example.com" target="_blank">Example Link</a> 
      `;

      // Use $nextTick to wait for DOM refresh before binding events
      this.$nextTick(() => { 
        this.bindClickEvents() // Bind click events after SVG is loaded
      })

    },
    bindClickEvents () {
      // Find all anchor tags within the SVG container
      this.$refs.svg_container.querySelectorAll('a').forEach(element => {
        element.removeAttribute('target') // Remove any existing 'target' attribute
        element.addEventListener('click', this.handleClick) // Set up click event listener
      })
    },
    handleClick (event) {
      // Handle the click event as needed
      event.preventDefault()
    }
  }
};

Answer 2

Once your SVG has been properly loaded, you can set up click event listeners on the elements within it:

export default {
  name: "App",
  data() {
    return {
      svgContent: null
    };
  },
  methods: {
    async loadSvg() {
      // Load your SVG content here
      this.svgContent = `
        <a href="https://example.com" target="_blank">Example Link</a> 
      `;

      // Use $nextTick to wait for DOM refresh before binding events
      this.$nextTick(() => { 
        this.bindClickEvents() // Bind click events after SVG is loaded
      })

    },
    bindClickEvents () {
      // Find all anchor tags within the SVG container
      this.$refs.svg_container.querySelectorAll('a').forEach(element => {
        element.removeAttribute('target') // Remove any existing 'target' attribute
        element.addEventListener('click', this.handleClick) // Set up click event listener
      })
    },
    handleClick (event) {
      // Handle the click event as needed
      event.preventDefault()
    }
  }
};

Answer 3

Answer №2

Utilize the ref that has been established and regular JS to connect with the tags.

this.$refs.map_svg.querySelectorAll('a').forEach(element => element.addEventListener('click', this.callback) )

Answer 4

Utilize the ref that has been established and regular JS to connect with the tags.

this.$refs.map_svg.querySelectorAll('a').forEach(element => element.addEventListener('click', this.callback) )

Is there a way to attach event listeners to raw HTML that has been imported using code?

Edit

Answer №1

Answer №2

Similar questions

``There seems to be a malfunction with the modal feature in the asp.net

Selecting options using AngularJS to parse through a list

Error encountered when trying to generate a collection from JSON using Backbone framework

casperjs is encountering difficulty locating the id even after setting it

What is preventing the fetch from functioning properly within the nuxtServerInit of the store?

Validate if the Jquery AJAX response contains any data

Error with Cross-Origin Resource Sharing (CORS) on my website

Adding a static global constant in webpack dynamically

When using the setTimeout function to update the state, React useContext appears to be ineffective

How to prompt the browser to download a file with a specific name using node.js and express

Utilize three.js within a Google web app script - unable to incorporate the script module type for loading three.js

Implement a click event for the newly added item

What causes a Next.js App to crash when a prop is not defined in destructuring code?

The feature of determining if an edge exists, within the dagre-d3/graphlib,

Click on the login button once the field has reached its maximum length

Angular parent scope does not reflect changes when a directive updates the shared scope variable

What is the best way to add a "Save to Favorites" link within a modal window

What is the best way to utilize AJAX in sending chosen files to a PHP script?

Vue 3 has officially deprecated the use of ::v-deep as a combinator. Going forward, please utilize ::v-deep(<inner-selector>) instead

Error 400 encountered when attempting to send anti-forgery token through axios.post request