CODEWITHSUNDEEP
phpjavascriptjquery
user2356932
user2356932

Reputation: 97

jQuery not working on hyperlink click

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>";
  }
?>

Upvotes: 2

Views: 220

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388436

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

Upvotes: 2

Rohan Kumar
Rohan Kumar

Reputation: 40639

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>

Upvotes: 0

Related Questions