"Clicking on a link inside a div element using the onclick

Hey there! I'm having an issue with a div that contains a link with an onclick event (see the code snippet). Inside this div, there is another link that goes to a different page than the div itself. The code works perfectly fine in IE, Chrome, and Firefox, but unfortunately not in Safari. In Safari, it always redirects to the whole div link instead of the intended other link. Do you have any ideas on how to fix this? I've tried some suggestions from other posts, but so far, nothing has resolved the issue for me.

<div class="coach-list" style="cursor: pointer;"
     onclick="window.location='/page';if (!e) var e = window.event;
                                e.cancelBubble = true;
                                if (e.stopPropagation) e.stopPropagation();">
    <div class="coach-list-inner">
        <h4>Name</h4>

        <p><a href="/otherpage" target="_blank">Link to other page</a></p>
    </div>
</div>
javascriptjqueryhtmlcss

Answer №1

Check out this functional example that demonstrates how to avoid using inline JS.

<div class="teacher-list" style="cursor: pointer;">
    <div class="teacher-list-inner">
         <h4>Instructor Name</h4>

        <p><a href="/anotherpage" target="_blank">Click here to go to another page</a>

        </p>
    </div>
</div>

$('.teacher-list').click(function () {
    alert('div');
    window.location = '/anotherpage';
    return true;
});

$('a').click(function (e) {
    alert('a');
    e.stopImmediatePropagation();
    return false;
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Verify that the input is zero and then proceed to deactivate the submit button if it is indeed zero in AngularJS

app.controller('HelloController', function($scope) { console.log($scope.input1); console.log($scope.input2); if (($scope.op_option == 4) && ($scope.input2 == 0)) { myForm.$invalid; } }); <form id="calc" method="pos ...

javascriptangularjs

I am having issues displaying my background image

I'm experiencing an issue where my background image isn't displaying correctly. Here is the CSS code I'm using: body { background-image: url('img/bg.png'); background-repeat: no-repeat; } ...

css

<ul> hover effect and text </ul>

Looking for a solution to activate hover state on both the box and text when rolling over tiled images with text underneath. Check out this example in the Fiddle: http://jsfiddle.net/techydude/GF8tS/ Any suggestions on how I can achieve this effect? ...

cssrollover

Is there a way to retrieve the ID value from a populated div using ajax?

Struggling to pass the correct id function back to AJAX. I'm working on a product bulletin generator that allows items to be added by their SKU code. Adding items works fine, but the issue arises when trying to delete a product from the bulletin. The ...

ajaxvariablesloopshtml

When attempting to call a script function in PHP and expecting a return value, an error was encountered: "Uncaught SyntaxError

My functions are working fine: <script> function createCookie(name,value,sec) { if (sec) { console.log('createCookie: '+name+', '+value+', '+sec); var date = new Date(); date.setTime(date.getTime()+(sec*1000 ...

javascriptphp

I am unable to make any changes to the CSS in the WordPress code that is already integrated

I have created a static web page to serve as my primary homepage. The page is built using HTML and CSS, with some PHP code pulled from My WordPress integrated into it. One of the functionalities I've added is to display the three most recent posts on ...

htmlcsswordpress

How can you transfer data from a jQuery function to a designated div element?

I'm struggling to transfer data from a function to a specific div, but I can't seem to make it work. I'm in the process of creating a gallery viewer and all I want is to pass the counter variable, which I use to display images, and the total ...

javascriptjqueryhtmlcss

Unable to relocate the cursor to an empty paragraph tag

Wow, I can't believe how challenging this issue is. My current project involves implementing the functionality for an enter key in a content editable div. Whenever the user hits enter, I either create a new p tag and add it to the document or split t ...

javascripthtmldom

Align elements vertically with React-Bootstrap by using the built-in functionality for center

Struggling to vertically center and center align elements using bootstrap, even with react-bootstrap col and row components. You can view my code on Codesandbox: Link Here is the code snippet: import React, { PureComponent } from "react"; impo ...

cssreactjstwitter-bootstrapbootstrap-4react-bootstrap

Is it possible to use Next Image to load multiple images within a loop effortlessly?

I have the following array of template types: const TEMPLATE_TYPES = [ { name: 'Blog Post', type: 'blog-post', img: '/img1.png' },... ]; In a later stage, I'm iterating over TEMPLATE_TYPE ...

javascriptreactjsnext.js

Creating a three-column layout in CSS with only two divs

Struggling to format a page with 3 columns using only 2 divs for the contents. One div affects just the end of the content, while the other impacts all of it. Currently, the layout is like this: This is the first content-------------------This is the se ...

css

Finding the precise top offset position with jQuery upon scrolling – a step-by-step guide

I need help with detecting the offset top of a TR element when it is clicked. It works fine initially, but once the page is scrolled, the offset().top value changes. How can I resolve this issue? $(function() { $('tr').click(function() { ...

javascriptjqueryhtmlcss

Enhancing Your Website Listings with Firebase: A Step-by-Step Guide to Updating

I am currently working on an admin panel for a website, utilizing Firebase as the backend database. I have successfully implemented the listings display feature, however, I'm facing an issue where clicking on a specific listing should change its statu ...

javascriptfirebasewebfirebase-realtime-database

The functionality of the jQuery button subscription is completely ineffective

I am attempting to display search results on the same page, but I'm encountering an issue. Here is my code: <form id="myForm"> <input id="filter_id" type="text"/> <input type="submit" id="load_results" value="Search" /> < ...

jqueryhtmlasp.net-mvc

Text about the three.js orthographic camera: "Exploring the

I'm trying to implement an orthographic camera overlay for a heads-up display on top of my main camera. I'm having trouble getting any text to show up, here's the code snippet: function setupHUD() { var width = window.innerWidth; var h ...

javascripttextthree.jsorthographic

Instructions for importing a JSON 3D model and placing it at the center in Three.js

Is there a way to accurately load a JSON object and position it at the origin? I have tried using object.position.x and mesh.position.x but haven't been successful in aligning the object with the origin. My goal is to calculate the maximum and minimum ...

javascriptjsonthree.js

Utilize the Google Drive API to easily upload an Excel file

I'm encountering an issue with the Google Drive API. I've been attempting to upload an Excel file using this API, but haven't had any success. I even tried following the instructions in the Google API documentation without luck. Below is a ...

javascriptnode.jsexcelgoogle-apigoogle-drive-api

What is the best way to recycle Vue and Vuetify code?

<script> export default { data () { return { my_alert: false, text: '', color: 'success' } }, methods: { openAlt (text, color) { this.text = text this.color = color this.my_ale ...

javascriptvue.jsvuetify.js

Compel the browser to initiate a reflow by adjusting the CSS

I am currently in the process of building a responsive image slider without relying on jQuery, using CSS3 transitions. The setup is quite simple: there's a viewport with a UL inside, containing relatively positioned LIs that are left floated. Howeve ...

javascripthtmlcssreflow

Ensure that Google Tag Manager (GTM) delays the pageview until the SPA URL title is available

I'm dealing with a React SPA that manages all the URL titles on the frontend, so the historyChange event registered on GTM captures the visited URLs along with their titles correctly. However, I've noticed that on the initial load of the SPA, su ...

javascriptreactjsgoogle-analyticssingle-page-applicationgoogle-tag-manager