refresh a DIV without refresah a full page with jquery

Asked Jun 23 '17 at 08:39

Active Jun 23 '17 at 08:39

Viewed 29 times

I try to resfresh a div without refresh a full page. the code :

$(document).ready(function() {
  $(".ext").on('click',function(event) {
    var url = $(this).prop('href');
    $("#change").load(url);
    event.preventDefault();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="page1.html" class="ext">page 1</a>
<a href="page2.php" class="ext">page 2</a>

<div id="change">
  <a href="page3.html" class="ext">page 3</a>
  <a href="page4.php" class="ext">page 4</a>
</div>

for resfresh page1 and page2 no problem. But when I want to resfresh page3 and page 4 all page is resfreshing. I don't find the solution. Can' you help me?

ps : sorry, I'am french and my language is bad.

asked Jun 23 '17 at 08:39

fabrice

The problem is because the content of the `#change` element is being added after the DOM loads, so you need to use a delegated event handler. `$(document).on('click', ".ext", function(e) { ...` See the duplicate for more information. – Rory McCrossan Jun 23 '17 at 08:44
Thank you Rory McCrossan, but I don't find de duplicate :/ – fabrice Jun 23 '17 at 09:04
It's linked in the yellow box at the top of this page – Rory McCrossan Jun 23 '17 at 09:21
:-) but how can I don't lose the initial DOM? I dont know delegate event handler for don't refresh all page :/ can you help me? – fabrice Jun 23 '17 at 09:55
I have no idea what you mean. All you need to do is change the event handler to what I gave you and your code will work. – Rory McCrossan Jun 23 '17 at 10:12
It's work thank you, :-) I was mistaken in changing the code :-) – fabrice Jun 23 '17 at 10:30

refresh a DIV without refresah a full page with jquery

0 Answers0