Javascript doesnt being dissolve after using ajax

Question

I have two .php page. Both displays a few info buttons, that i toggle with this code:

$(document).on("click", ".glyphicon-info-sign", function(){
    $(".glyphicon-info-sign").not(this).popover("hide");
    $(this).popover("toggle");
});

The script is placed after the html elements. I use a div, that contains a page under my header(home, contact, login etc.) and i use jquery-ajax to load the different pages to this div.

The problem is, when i load ,,page 1", then load "page 2", seems like both of the pages onclick event is still being active. I did think if i remove the event listener script from the div, then the listener stops working.

(There's a chance i'm wrong and the problem is something else.)

How can i fix it?

score 0 · Answer 1 · edited May 23 '17 at 10:34

0

I fixed my problem by changing the click event listener to:

$(".glyphicon-info-sign").click(function(){
    $(".glyphicon-info-sign").not(this).popover("hide");
    $(this).popover("toggle");
});

Here is why: Difference between .on('click') vs .click()

edited May 23 '17 at 10:34

Community

1
1

answered Jun 21 '16 at 17:23

János Simonyi

31
4

Before you were binding the click event to the document which stays bound until the page refreshes or you manually remove the binding. The code you have here binds only to the ".glyphicon-info-sign" elements that are currently present when that code runs. So when you load another page into the div, these get over written and no longer exist. – spaniol6 Jun 21 '16 at 17:30

Javascript doesnt being dissolve after using ajax

1 Answers1