CODEWITHSUNDEEP
javascriptjqueryhtmldom
Archer
Archer

Reputation: 1162

class in the included html not able to access function in parent file html

I have a mainfile.html with the following content

<html> 
  <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script> 
    $(function(){
      $("#includedContent").load("d.html"); 

      $(".alertclass").click(function(){
         alert('some c load action');
      });

    });
    </script> 
  </head> 

  <body> 
    <a class="alertclass" href="javascript:void(0);"> parent clicks heret </a>
    <br/>
     <div id="includedContent" ></div>

  </body> 
</html>

and my "d.html" file has content 

<div> <br/>
<a href="javascript:void(0);" class="alertclass">the child clicks here</a>
</div>

but the class "alertclass" does not seem to work when i click on the link in the included content from the child's page. is there a way to make it work for the included child page too?

P.S. - i tried to use "live" but, it throws an error

"Uncaught TypeError: Object [object Object] has no method 'live'"

I am looking for a solution apart from "live". Thanks !!

Upvotes: 4

Views: 98

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337590

live threw the no method error because it was removed from jQuery in version 1.9. It has been superceded by using on with a delegate selector.

Your problem is because you are attempting to attach the event to .alertClass before the content has finished loading. Try placing the event hook in the callback of load:

$("#includedContent").load("d.html", function() {
    $(".alertclass").click(function(){
        alert('some c load action');
    });
});

Alternatively as I mentioned, you could use on with a delegate selector:

$("#includedContent").load("d.html");
$(document).on('click', ".alertclass", function(){
    alert('some c load action');
});

Upvotes: 3

Related Questions