stop click() from happening on a ajax created input

Question

Sorry if this is answered already. I looked and looked for an answer but nothing is working.

What i'm trying to do is make a "confirmation" page be able to be updated on the fly if the user wanted to change their order.

I'm using testing items at the moment to get it working before I use the "real" information.

<div id="testing_editing">meat logs</div>

Jquery:

$("testing_editing").click(function(e){
    var testhtml = $(this).html();
    var meatseafood = '<?php echo $meatseafood; ?>';
    $.post('edit_order.php', {'itemtoedit':testhtml,'meatseafood':meatseafood}, function(data) {
    $("#testing_editing").html(data);
    });
});

edit_order.php:

include ("includes.php");
// connection to SQL

$item_to_edit = test_input($_POST['itemtoedit']);
$meatseafood = test_input($_POST['meatseafood']);

echo "<div id=\"child_toedit\"><input id=\"toedit\" type=\"text\" placeholder=\"$item_to_edit\"       size=20></div>";

I tried to add:

$("#child_toedit").click(function(e){
    e.stopPropagation();
});

Basically what happens is, i click the div with the info in it, and it replaces itself with the text input, but when i click in the text input to change the value, it makes the ajax call again and populates it with the code that is used to create the input so the placeholder becomes div id=\"child_toedit\" input id=\"toedit\" type=\"text\" placeholder=\"$item_to_edit\" size=20>/div and i'm never able to type in the box because everytime i click on the box it repopulates itself kinda like a infinite loop only you have to click it to cycle the loop

I haven't finished the code yet because i'm stuck here, but if you know how to make it so that a input box inside the div that has the click() function wont activate that function, it will allow me to continue on figuring out the rest of how to do this.

How i'm going to finish it is have a check box to the right of the input box, and when you check it, its going to call the ajax again and process the new data and return the new info w/out a input box. at least that's my idea. i'm not sure if it will work or not.

I don't have a working example at the moment for you to see it live.

Sorry if i didn't provide enough code or info.

I just need to know how to make it so i can click inside the elements in the div and not activate the div's click() function. I'm assuming it has to do with stopPropagation but i can't figure it out with the examples i've seen on this site and others.

Thank you for any help.

by the way, i'm extremely amateur when it comes to this, so if there is a better way i should be doing this to update data on the fly, i'd love any help. i've done a bunch of research but i cant find any answers so i'm kinda making it up as i go based on what i think it should be doing to achieve my goal. this is all code written from my head, not copied from something else.

Thanks, Derek Conlon

Answer 1

try something like this maybe?

var count = 0;
$("btn").click(function(){
     if(count == 0) {
        // clicks before launching ajax request
     } else {
       // launch ajax and prevent from being clicked again
       count = 1;
     }
});

Answer 2

Try prevent default instead of stop propagation:

$("#child_toedit").click(function(e){
    e.preventDefault();
    //write the rest of the code after this line
});

Answer 3

try jQuery function

$('#elemId').unbind('click')

Answer 4

The answer I ended up with was:

If (e.target === this) {} 

wrapping around my code after the initial

$("#testing_editing").click(function(e){

Thank you for all your help.