CODEWITHSUNDEEP
javascriptjqueryhtmlhyperlink
Himanshu Jain
Himanshu Jain

Reputation: 35

jquery click not working on dynamically added hrefs in IE11

Hello I have some links in my HTML code. I want to change the href property of each link on hover and then on clicking this link I want to open it up in a new tab. The code is as follows: 

$('.identifierClass').hover(function(e) {
if(condition) // is true
{
    $(element).attr("href", "url/goes/here").off().click(function(e) {
        $(element).attr("target", "_blank");
    });
 }
});

Everything is working properly in Chrome/Firefox, however, on clicking the link in IE 11 it simply hangs and click wont work.

Any help is appreciated.

Upvotes: 0

Views: 762

Answers (1)

JasonWilczak
JasonWilczak

Reputation: 2403

You need to bind to a static or preexisting element that the dynamic elements will be created inside of:

$(document).on('mouseenter','.identifierClass',function(e) {
if(condition) // is true
{
    $(element).attr("href", "url/goes/here").attr("target", "_blank");
 }
});

Edit: here is a fiddle of it and I also had to use 'mouseenter' instead of 'hover' when using the string name for the event. jquery .hover() documentation

In the fiddle i show you two divs being added dynamically:

$('#place').html('<div class="identifierClass">hover1</div><div class="identifierClass2">hover2</div>');

Above that, I set my event handlers, for hover1 div, I set the event on the document using a specified selector:

$(document).on('mouseenter','.identifierClass',function(e) {
alert('hi');
});

You can see this works when you hover of 'hover1' text on the right and, conversely, you can see hover2 doesn't work using this binding:

$('.identifierClass2').hover(function(e) {
alert('hi2');
});

here is a link to the jquery documentation on event delegation.

Edit2: I updated the fiddle to address the 'href' manipulation. It appears that you just want to change some attributes on the hover portion:

I modified the 'mouseenter' binding to look like this:

$(document).on('mouseenter','.identifierClass',function(e) {
    alert('hi');    $('#someLink').attr('href','http://www.bing.com').attr('target','_blank');
});

I don't think you need the 'off' or the 'click', but that is based off of some assumptions, so please feel free to comment and I can update accordingly. This, though, will change the href when the mouseenters the dynamic element and change the target attribute as well.

Upvotes: 2

Related Questions