Click functions executes only once
Hello people.
I have a problem and I have not yet found an answer via google or the search on this forum. I hope i can make my problem below clear for English is not my native language.
Using jqueries .post and .replaceWith functionality i tried to make a value from an item toggleable.
I have an amount of divs with a class representing its status. On page-load a php/smarty scripts displays the divs with the correct class.
With a jquery click-function on a img inside this div i load a php-script changing the status of the item and return the complete update div including contents. I replace the old div with the new one using .replaceWith(date) (or .after(date).remove(), does exactly the same).
(abstract) Sample code below does exactly what i want, but just once (per div). I can switch the status and the new div gets loaded (with the new class, and 1 button changed for toggling) but i cant reswitch it again. I still can switch other divs (once)
When i refresh the page nothing visually changes (apparently handled that correctly) i can click the image again.
// HTML
-
<div id="1" class="status1">
-- Contents --
<img src="class1.gif" alt="Change to class2" attr="status1" />
</div>
<div id="2" class="status2">
-- Contents --
<img src="class2.gif" alt="Change to withClass-class" attr="status2" />
</div>
// Jquery
-
//inside document.ready
$("img").click(function() {
var clicked = $(this).attr("class");
var attr = $(this).attr("attr");
if (clicked == "status1") {
$.post("functions.php", { function : "funt", status : attr }, function(data){
$("#" + taak).after(data).remove(); //same as replaceWith(data)
});
} else if (clicked == "status2") {
$.post("functions.php", { function : "funct", status : attr }, function(data){
$("#" + taak).replaceWith(data);
});
}
});
// PHP
-
function funct ($status) {
$sql ="updating the new status";
. . .
echo '
<div id="$correctId" class="$newStatus">
-- Contents --
<img src="$newStatus.gif" alt="Change to $otherStatus-class" attr="$newStatus" />
</div>';
}
I have tried creating a js function with the clickfuntions, loading if in document.ready and reloading it recursively inside the function. this results in continues refreshing after the second click.
I have tried adding returns at the end of the functions, doesn't change a thing.
View a working example at
http://tsign.mine.nu/todo.php?p=planning
(IE is not gonna work) but please do not use the delete button, as the add-item functions does not work yet.
Does anyone have an idea why my click-function is only once executed per item.
Using latest jquery to date, php5, apache2 and FF3