This is my code. It loads the pages content without refresh.
The problem is when I click on button handled by jQuery and ajax it fires as many times as I load the pages.
For e.g. If loaded 2 pages, jQuery will fire twice
If I loaded 4 pages, jQuery will load 4 times.
<script>
$(document).ready(function(){
//set trigger and container
var trigger = $('#nav ul li a'),
container = $('#container');
//do on click
trigger.on('click', function(e){
/***********/
e.preventDefault();
/* reload content without refresh */
//set loading img
$('#container').append('<div id = "loading">WAIT... <img src = "img/ajax-loader-small.gif" alt="Currently loading" /></div>');
//change img location to center
$("#loading").css({"position": "absolute", "left": "50%", "top": "50%"});
//get the trigger to reload the contents
var $this = $(this),
target = $this.data('target');
container.load(target + '.php');
// return false;
$(trigger).die('click');
});
});
This script fires as many times as I load the page through load() function which mean same post will be inserted many times into the database
<script>
$(document).ready(function(){
$(document).on("click",".fa-pinterest-square",function(e) {
var form = $(this).find('form'); //Since the form is child to <i>
$.ajax({
url: "includes/widgets/add_pains.php",
type: "POST",
data: form.serialize(),
success: function(data) {
alert(data);
}
});
});
});
</script>
How can I fix this issue?