1

This question is directly related to the question I asked here: stop click() from happening on a ajax created input

I figured out the answer to that one by simply adding if (e.target === this), but now my returned response wont do anything when I check the box.

The new code that is being returned by my .post is:

$output .= "<table><tr><td>";
$output .= "<input id=\"toedit\" type=\"text\" placeholder=\"$item_to_edit\" size=20>";
$output .= "</td><td>";
$output .= "<input id=\"test_editing_check\" type=\"checkbox\" name=\"test_editing_check\" value=\"test_editing_check\" \>";
$output .= "</td></tr></table>";

But my Jquery which is on the original page:

$("#testing_editing").click(function(e){
    if (e.target === this) {
        var testhtml = $(this).html();
        var meatseafood = '<?php echo $meatseafood; ?>';
        $.post('edit_order.php', {'itemtoedit':testhtml,'meatseafood':meatseafood}, function(data) { //make ajax call to check_username.php
        $("#testing_editing").html(data); //dump the data received from PHP page
        });
    }
    });
    $("#test_editing_check").click(function(){
        if ( this.checked ) {
            var testvalue = "HI";
            alert(testvalue);
        }
    });

Doesn't seem to work on the check box that is being returned by the .post() call.

Is there something i need to do in order to make a .post() return be recognized by the main page's jquery code? I hope its not something wrong with my syntax but i've used this exact (very basic) code on another page (but not with a .post() call) and it works fine.

Basically, when you click the div my main page writes, it calls a .post() and returns a editable input field and a check box. When i click that checkbox, i want it to make another .post() call and update a database with the newly entered data.

however, when i check the check box nothing happens.

it would seem my ajax returned code isn't recognized by the jquery from the original/main page. with my test code all i'm trying to do is pop up an alert box when i click the checkbox to show that it has "read" the input box and can now send that data through the .post() call to be processed.

Let me know if you need any other code. It seems pretty cut and dry though so i'm not sure why it isn't working and that's why i'm here :)

(the idea of what i'm trying to do is, a user submits a form, on the next page, a "confirmation box" is shown saying "is this what you wanted to submit with your form? and if the answer is no, they can "click" on the data and change it w/out having to reload the page. the clicking part works but the checkbox to acknowledge "yes, i want to change my data to this newly entered data" isn't working.)

Thanks for any help.

Derek Conlon

Community
  • 1
  • 1
DerekConlon
  • 353
  • 1
  • 5
  • 17

1 Answers1

0

Try to assign the event after loading the checkbox like this:

$("#testing_editing").click(function(e){
    if (e.target === this) {
        var testhtml = $(this).html();
        var meatseafood = '<?php echo $meatseafood; ?>';
        $.post('edit_order.php', {'itemtoedit':testhtml,'meatseafood':meatseafood}, function(data) { //make ajax call to check_username.php
           $("#testing_editing").html(data); //dump the data received from PHP page

           // This is applied after loading the data from the ajax call
           $("#test_editing_check").click(function(){
              if ( this.checked ) {
                 var testvalue = "HI";
                 alert(testvalue);
              }
            });
        });
    }
    });
CMPS
  • 7,733
  • 4
  • 28
  • 53