通过jQuery load（）加载到页面中时，jQuery / JavaScript Ajax无法正常工作

Question

Have tried looking at answers similar but can't quite understand it. I have tested the following code [www.mangocleaning.com/testing/pg1.php][1] and it works fine when used directly on its own page. However, when I load it via ajax load() to act as content within a current page it stops working. Can anyone help please? I copy and paste a lot and have limited understanding so please make it as simple for me to understand as you can please. Many thanks

 <script>

      function showEdit(editableObj){$(editableObj).css("background","#FFF");} 
      function saveToDatabase(editableObj,column,id) {
      $(editableObj).css("background","#CCC url(loaderIcon.gif) no-repeat right");
       $.ajax({
        url: "pg3.php",
        type: "POST",
        data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id,
        success: function(data){
    $(editableObj).css("background","#CCC");
    }        
});
}

</script>

</head>

<form name='userForm' id='userForm'>
<div><input type='text' name='company_name' placeholder='Company Name' /></div>
<div><input type='text' name='contact' placeholder='Contact' /></div>
<div><input type='text' name='priority' placeholder='Priority' /></div>
<div><input type='text' name='email_to' placeholder='Email to' /></div>
<div><input type='text' name='email_from' placeholder='Email from' /></div>
<div><input type='text' name='begin_message' placeholder='Dear / Hi / Hello' /></div>
<div><input type='text' name='message_text' placeholder='Message content' /></div>
<div><input type='text' name='end_message' placeholder='Many thanks / Kind regards' /></div>
<div><input type='submit' value='Submit' /></div>
</form>



<div class="table_outer">
<table class="table1" id="table1">

<thead>
    <th>id</th>
    <th>Company</th>
    <th>Person</th>
        <th>Email to</th>
        <th>Email from</th>
        <th>Begin message</th>
        <th>Text</th>
        <th>End message</th>
        <th>Delete</th>
</thead>

<?php
require_once("pg5.php");
$db_handle = new DBController();
$sql = "SELECT * from InvoiceEmailData";
$data = $db_handle->runQuery($sql);

foreach($data as $data_variable=>$dsdjgskjghkjfh) {
?>

<tr>
    <td contenteditable="false" onBlur="saveToDatabase(this,'id','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["id"]; ?></td>
    <td contenteditable="true" onBlur="saveToDatabase(this,'Company','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["Company"]; ?></td>
    <td contenteditable="true" onBlur="saveToDatabase(this,'Person','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["Person"]; ?></td>
    <td contenteditable="true" onBlur="saveToDatabase(this,'EmailTo','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["EmailTo"]; ?></td>
    <td contenteditable="true" onBlur="saveToDatabase(this,'EmailFrom','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["EmailFrom"]; ?></td>
    <td contenteditable="true" onBlur="saveToDatabase(this,'BeginMessage','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["BeginMessage"]; ?></td>
    <td contenteditable="true" onBlur="saveToDatabase(this,'Text','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["Text"]; ?></td>
    <td contenteditable="true" onBlur="saveToDatabase(this,'EndMessage','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["EndMessage"]; ?></td>

     <td> <input type="submit" id='<?php echo $data[$data_variable]["id"] ?>' value='Delete' class="delete-button"  /> </td>
</tr>

<?php
}
?>

</table>

JQUERY/AJAX TO SEND AND THEN RECEIVE BACK FORM DATA TO/FROM PG2  TO ADD TO TABLE ABOVE - ALSO DELETE ROWS USING DELETE QUERY FROM PG3
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script>

delete_task(); // Call the delete_task function
$(document).ready(function(){
    $('#userForm').submit(function(){

    $.ajax({
        type: 'POST',
        url: 'pg2.php', 
        data: $(this).serialize()
            })

    .done(function( data ) {$(data).appendTo('#table1').hide().fadeIn(2000);delete_task();
            })

    .fail(function() { alert( "Posting failed." ); });
        return false;

        });
    });

function delete_task() {
    $('.delete-button').click(function(){
    var current_element = $(this);
    var id = $(this).attr('id');

    $.post('pg4.php', { list_entry_id: id }, function() {
    current_element.parent().fadeOut(300, function() { $(this).closest('tr').remove(); });

});
    });

}

Answer 1

i added extra code at the end and it worked: you need to add e.preventDefault(); to prevent default browser submit and at the end of your sample code to have the javascript work

    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
     <script>

          function showEdit(editableObj){$(editableObj).css("background","#FFF");} 
          function saveToDatabase(editableObj,column,id) {
          $(editableObj).css("background","#CCC url(loaderIcon.gif) no-repeat right");
           $.ajax({
            url: "pg3.php",
            type: "POST",
            data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id,
            success: function(data){    $(editableObj).css("background","#CCC");
            }        
            });
            }

    </script>

    </head>

    <form name='userForm' id="userForm">
    <div><input type='text' name='company_name' placeholder='Company Name' /></div>
    <div><input type='text' name='contact' placeholder='Contact' /></div>
    <div><input type='text' name='priority' placeholder='Priority' /></div>
    <div><input type='text' name='email_to' placeholder='Email to' /></div>
    <div><input type='text' name='email_from' placeholder='Email from' /></div>
    <div><input type='text' name='begin_message' placeholder='Dear / Hi / Hello' /></div>
    <div><input type='text' name='message_text' placeholder='Message content' /></div>
    <div><input type='text' name='end_message' placeholder='Many thanks / Kind regards' /></div>
    <div><input type='submit' value='Submit' /></div>
    </form>



    <div class="table_outer">
    <table class="table1" id="table1">

    <thead>
        <th>id</th>
        <th>Company</th>
        <th>Person</th>
            <th>Email to</th>
            <th>Email from</th>
            <th>Begin message</th>
            <th>Text</th>
            <th>End message</th>
            <th>Delete</th>
    </thead>

    <?php
    require_once("pg5.php");
    $db_handle = new DBController();
    $sql = "SELECT * from InvoiceEmailData";
    $data = $db_handle->runQuery($sql);

    foreach($data as $data_variable=>$dsdjgskjghkjfh) {

    ?>

<tr>
    <td contenteditable="false" onBlur="saveToDatabase(this,'id','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["id"]; ?></td>
    <td contenteditable="true" onBlur="saveToDatabase(this,'Company','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["Company"]; ?></td>
    <td contenteditable="true" onBlur="saveToDatabase(this,'Person','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["Person"]; ?></td>
    <td contenteditable="true" onBlur="saveToDatabase(this,'EmailTo','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["EmailTo"]; ?></td>
    <td contenteditable="true" onBlur="saveToDatabase(this,'EmailFrom','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["EmailFrom"]; ?></td>
    <td contenteditable="true" onBlur="saveToDatabase(this,'BeginMessage','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["BeginMessage"]; ?></td>
    <td contenteditable="true" onBlur="saveToDatabase(this,'Text','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["Text"]; ?></td>
    <td contenteditable="true" onBlur="saveToDatabase(this,'EndMessage','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["EndMessage"]; ?></td>

     <td> <input type="submit" id='<?php echo $data[$data_variable]["id"] ?>' value='Delete' class="delete-button"  /> </td>
</tr>

    <?php
    }
    ?>

    </table>

    JQUERY/AJAX TO SEND AND THEN RECEIVE BACK FORM DATA TO/FROM PG2  TO ADD TO TABLE ABOVE - ALSO DELETE ROWS USING DELETE QUERY FROM PG3

    <script>

    //delete_task(); // Call the delete_task function
    $(document).ready(function(){
        $('#userForm').submit(function(e){

        e.preventDefault();

        $.ajax({
            method: 'POST',
            url: 'pg2.php', 
            data: $(this).serialize()
                })

        .done(function( data ) {$(data).appendTo('#table1').hide().fadeIn(2000);delete_task();
                })

        .fail(function() { alert( "Posting failed." ); });
            return false;

            });



        });

    function delete_task() {
        $('.delete-button').click(function(){
        var current_element = $(this);
        var id = $(this).attr('id');

        $.post('pg4.php', { list_entry_id: id }, function() {
        current_element.parent().fadeOut(300, function() { $(this).closest('tr').remove(); });

    });
        });

    }
    </script>
    </html>