jQuery not working on hyperlink click

Question

I wrote a php script index.php as given below. This script will create some hyperlinks when it loads. If I click on any of these hyperlinks, it will load the output of example.php in div tag of id="myDiv".The output of example.php is again some hyperlinks and i wish to execute a jquery function when I click on these links. In this case i gave an alert inside this jquery function, but it is not executing that jquery function. The whole code is given below. Please help me to solve this problem.

<?php
    $mainlinks = array("10.3.2.0","10.3.2.1","10.3.2.2");
    for($i=0;$i<count($items);$i++)
    {
        echo "<a class='likelink' href='javascript:void(0)'>$mainlinks[$i]</a>" . "<br>";
    }
?>

<html>
  <head>
    <script src="jquery/jquery-1.9.1.js"></script>
    <script type="text/javascript">
    $(function() {
       $('.likelink').click(function() {
         $('#myDiv').load("example.php");                                 
       });
    });
    $(function() {
      $('.sublink').click(function() {
           alert("hello");                                 
      });
    });
    </script>
  </head>
  <body>
    <div id="myDiv"></div>
  </body>
</html>

And this my example.php file

<?php
  $sublinks = array("abcd","efgh","ijkl");
  for($i=0;$i<5;$i++)
  {
        echo "<a class='sublink' href='javascript:void(0)'>sublinks[$i]</a>" . "<br>";
  }
?>

Arun P Johny · Accepted Answer · 2013-05-08 08:13:37Z

2

Since sublink are not present when the index page is loaded, you need to use delegated event registration model to handle the click event.

Use .on() to register the click event, since the sublink's are loaded to #myDiv you can do it with the following code.

$(function() {
    $('#myDiv').on('click', '.sublink', function() {
        alert("hello");                                 
    });
});

Update:
a basic explanation will go along the lines of... when you use click() to register event handler method it will add the handler to only those elements which are present in the dom at the time of execution of the code. When you deal with dynamic creation/loading of elements this will not work as the elements may not be present in the dom when the command is executed

edited May 8, 2013 at 8:13

answered May 8, 2013 at 7:24

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2356932 Over a year ago

This worked great dude.Can you explain the logic here. I am new to Jquery thats why asking.

Arun P Johny Over a year ago

@user2356932 one easy way to learn more about is to search for add event handler to dynamic elements using jquery.

Arun P Johny Over a year ago

@user2356932 a basic explanation will go along the lines of... when you use click() to register event handler method it will add the handler to only those elements which are present in the dom at the time of execution of the code. When you deal with dynamic creation/loading of elements this will not work as the elements may not be present in the dom when the command is executed

Rohan Kumar · Accepted Answer · 2013-05-08 07:35:32Z

0

Here in your problem, sublink is not present when the your page is loaded, you need to use delegated event to handle the click event.

$(function() {
   $(document).on('click','.likelink',function(e) {
       e.preventDefault();
       $('#myDiv').load("example.php");                                 
   });
});

From jquery.on()

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler, as described next.

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

Also, your php code should be in the body as you are echoing the links

like

<body>
    <?php
        $mainlinks = array("10.3.2.0","10.3.2.1","10.3.2.2");
        for($i=0;$i<count($items);$i++)
        {
            echo "<a class='likelink' href='javascript:void(0)'>$mainlinks[$i]</a>" . "<br>";
        }
    ?>
</body>

edited May 8, 2013 at 7:35

answered May 8, 2013 at 7:26

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

1 Comment

andyb Over a year ago

This is incorrect and is also doesn't even attempt to explain the actual problem or solution.

Collectives™ on Stack Overflow

jQuery not working on hyperlink click

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related