我使用ajax显示它后按钮拒绝提交[复制]

Question

This question already has an answer here:

• Event binding on dynamically created elements? 23 answers

I have a form in which i use to insert data using ajax and php

I have gotten it to work the way i want but i wanted to make some adjustments to it, below is what i am trying to say

Initially

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!--AJAX-->
<script>
    $(document).ready(function() {
    <!--#my-form grabs the form id-->

        $("#<?php echo $row_trx['jobid']; ?>").submit(function(e) {

            e.preventDefault();
            $.ajax( {
                 <!--insert.php calls the PHP file-->
                 url: "in.php",
                 method: "post",
                 data    : { name: "<?php echo $row_user['Username'];?>" , jobid: "<?php echo $row_trx['jobid']; ?>" },
                 dataType: "text",
                 success: function(strMessage) {
                     $("#message").text(strMessage);
                     $("#<?php echo $row_trx['jobid']; ?>")[0].reset();
                 }
             });
        });
    });
</script>

<form id="<?php echo $row_trx['jobid']; ?>" name="<?php echo $row_trx['jobid']; ?>" id="form<?php echo $row_trx['jobid']; ?>" action="" method="post">

    <button  type="submit" id ="<?php echo $row_trx['jobid']; ?>">Add as favourite</button>
</form>

which works when the button is loaded on the page by default,

Adjustments i wanted to make was to display using ajax for some reason using below in the div with id='ajaxDiv'

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
setInterval(ajaxFunction<?php echo $row_trx['jobid']; ?>, 1000);
function ajaxFunction<?php echo $row_trx['jobid']; ?>(){
    var ajaxRequest;  // The variable that makes Ajax possible!

    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            var ajaxDisplay<?php echo $row_trx['jobid']; ?> = document.getElementById('ajaxDiv<?php echo $row_trx['jobid']; ?>');
            ajaxDisplay<?php echo $row_trx['jobid']; ?>.innerHTML = ajaxRequest.responseText;
        }
    }
    var age = document.getElementById('age<?php echo $row_trx['jobid']; ?>').value;
    var wpm = document.getElementById('wpm<?php echo $row_trx['jobid']; ?>').value;

    var queryString = "?age=" + age + "&wpm=" + wpm;
    ajaxRequest.open("GET", "favourite.php" + queryString, true);
    ajaxRequest.send(null); 
}

//-->
</script>
<form style="font-size: 1px;" name='myForm<?php echo $row_trx['jobid']; ?>'>
<input type='hidden' value="<?php echo $row_user['Username'];?>" id='age<?php echo $row_trx['jobid']; ?>' /> <br />
<input type='hidden' value="<?php echo $row_trx['jobid']; ?>" id='wpm<?php echo $row_trx['jobid']; ?>' />
<br />


</form>

<div id='ajaxDiv<?php echo $row_trx['jobid']; ?>'></div>

the button submit my data wen i try to display in the div via ajax, please i need help on this

</div>

Answer 1

Use jquery on :

$("body").on("submit", "#<?php echo $row_trx['jobid']; ?>", function(e) { ...

I don't like you selectors btw you can always set class for the form, for example something like this :

<form class="my_form"><input name="id" value="1" />...Some code here ..</form>
<form class="my_form"><input name="id" value="2" />...Some code here ..</form>
<form class="my_form"><input name="id" value="3" />...Some code here ..</form>

and lose the php in the javascript, like this:

 $("body").on("submit", ".my_form", function(e) { ....