CODEWITHSUNDEEP
javascriptjqueryioshyperlink
RussellHarrower
RussellHarrower

Reputation: 6820

JavaScript innerHTML links iOS browser

I am struggling to get links to become clickable when using JavaScript innerhtml, or even jQuery html or append.

I have tried following this jquery .html() VS innerHTML() and asking a number of questions, but it seems all suggestions have no worked.

How can I put a link using this?

innerHTML("<a href='http://www.google.com'>google.com</a>");

and onclick

innerHTML("<a href='#' onclick='loadlink('http://www.google.com');'>google.com</a>");

I have tried to do it both ways, and it just is not working.

Upvotes: 0

Views: 395

Answers (2)

RussellHarrower
RussellHarrower

Reputation: 6820

The issue was z-index it seems that you can't have a z-index:-1 as it will not allow you to click anything in that div, removing it fixed my issue, so the issue was not JavaScript at all but rather CSS. It is interesting and a good note, not to sometimes second-guess yourself when you know that your code is not wrong, but to strip it back and look at the CSS and other parts of your site.

It took three days for me to stop thinking about the JavaScript. How I came about this, was because iOS could not debug the issue; I went to Chrome and coded the part in question, and it worked fine, once I added the same styling and CSS it stopped working, removed a few divs and it worked again, so the only thing to look at was the css, i could not see anything wrong, but then I thought, wait a second what does z-index do? it moved the div in front of another div, -1 could mean that it is behind the body, and there for it can be seen, but not click.

It was the only thinking I could come up with and it fixed the issue.

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388406

.html() is a utility function provided by jQuery, so if you are using a jQuery wrapper to set the value then you need to use it

var el = jQuery('#myelementid');
el.html("<a href='http://www.google.com'>google.com</a>");

.innerHTML is a property of the dom object, so if you have a dom element reference then you need to use it. Note: It is not a function it is a property

var el = document.getElementById('myelementid');
el.innerHTML = "<a href='http://www.google.com'>google.com</a>";

Upvotes: 2

Related Questions