I am trying to create a simple jquery function that responds to a click, runs an $.post() function in jquery and then changes the HTML.
It works as expected the first click. The second time I click it does not fire. It seems that newly created ID of either eip_on or eip_off is not dected in the DOM to trigger the click and change things again. This link is created on page load with PHP based on a session var. I am trying to create a simple hyperlink to toggle this on and off.
$('#eip_on').on('click', function(event){
event.preventDefault();
$.post("/lib/php/login.functions.php", { toggle_eip: true} )
$('#eip_block').html('<span class="eip_toggle">Edit Mode: ON. <a id="eip_off" href="#" > Turn Off</a></span><br /><br /><label><input id="update_page" type="image" src="/images/save_changes.png" /></label>');
});
$('#eip_off').on('click', function(event){
event.preventDefault();
$.post("/lib/php/login.functions.php", { toggle_eip: true} )
$('#eip_block').html('<span class="eip_toggle">Edit Mode: OFF. <a id="eip_on" href="#" > Turn On</a></span>');
});
Thanks in advance.
Nate