JuliaWatanabe
JuliaWatanabe

Reputation: 67

jQuery click event not working in Chrome

I used this code as an easy example to grab the content of another HTML file and put it in a div, whenever I click the link. It works great in Firefox and Safari, but not in Chrome, IE or Opera.

<a class="ajaxLink" href="RS.html">Click to load RS content</a>

<div id="page">
    Initial TEXT - will be substituted with RS when clicking ajaxLink
</div>

<script>
    $(function () {
        $('a.ajaxLink').click(function(e) {
            e.preventDefault();
            $('#page').load($(this).attr('href'));
        });
    });
</script>

In Chrome, IE & Opera, whenever I click the link, nothing happens, independent of the content of the HTML file. Might it be my code is not compatible?

To be honest, I got this code from here: Javascript wont load into ajax div

I do not fully understand how the ($(this).attr('href')); works, but understood that it should be correct to load the HTML in #page.

Upvotes: 2

Views: 6057

Answers (2)

Suraj Rawat
Suraj Rawat

Reputation: 3763

There is no problem with your code my friend try it on mozilla instead of chrome it wont work on chrome because

You won't be able to access the URL from same domain due to the same-origin policy. As the source (origin) page and the target URL are at different domains, your code is actually attempting to make a Cross-domain (CORS) request, not an ordinary GET in simple words : for localhost and getting page from same domain u can;t access the file

Upvotes: 2

DaveB
DaveB

Reputation: 3083

The $(this).attr('href') simply takes the 'href' attribute from the anchor (in this case 'RS.html')

You should debug your code by adding some breakpoints / console.log statements to find out at what point its not working (the click event should be firing at least), I cannot see any reason that Chrome would behave any differently.

Upvotes: 0

Related Questions