CODEWITHSUNDEEP
javascripthtmlcross-browser
Alex
Alex

Reputation: 335

onClick is not working in chrome?

I have a slider menu which I want by clicking on that another page loaded. in firefox its works but I want to works my HTML in any browsers? could you please help me? thanks.

index.html:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<div >
    <a href="#" id="link1" >Vertical link 1</a>
</div>
<div id="content"></div>
<script>
    $("#link1").on("click", function () {
    $("#content").load("test.html");
    });
</script>
</body>
</html>

test.html:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div>
    <table>
        <thead>
            <tr>
                <th scope="col">A</th>
                <th scope="col">B</th>  
                <th scope="col">C</th> 
                <th scope="col">D</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>         
        </tbody>
    </table>
</div>
</body>
</html>

Upvotes: 0

Views: 1013

Answers (3)

Abhilash D K
Abhilash D K

Reputation: 1309

If you navigate to http://api.jquery.com/load/ you will notice this line :

Description: Load data from the server and place the returned HTML into the matched element.

So basically if you want to use load you should fire it up from a server.

try this if you have installed python3 on a command prompt :

python3 -m http.server 9000

Then open browser and navigate to http://localhost:9000. Click on the link it will work.

You can do this from any server but for load to work you should fire up your page from a server.

This is only in chrome.

Upvotes: 0

bigfanjs
bigfanjs

Reputation: 772

I think this has to work!

<div class="wrapper">
    <a href="#" id="link1" >Vertical link 1</a>
    <a href="#" id="link2" >Vertical link 2</a>
    <a href="#" id="link3" >Vertical link 3</a>
    <a href="#" id="link4" >Vertical link 4</a>
</div>
<div id="content"></div>

<script>
    $('document').ready(function () {
       $('.wrapper').children().on('click', function (e) {
          e.preventDefault();
          $('#content').load($(this).attr('href'));
       });
    });
</script>

Upvotes: 1

Redr01d
Redr01d

Reputation: 392

If the content is dynamic then it needs to be delegated : 

$(document).on("click", "#link1" , function () {
    console.log('click')
    $("#content").load("./resources/link1.html");
});

Upvotes: 0

Related Questions