Ajax只加载第一条记录吗？

Question

This function works on loading an external page inside of a div that passes a $_POST variable and click works on the first record on loading the same external page with $_POST variable from query.

 $(document).ready(function(){
// load index page when the page loads
$("#form").load("tm-reserves-form.php");
$("#record").click(function(){
// load home page on click
    var ContactID = document.getElementById('ContactID').value;
    $("#form").load("tm-reserves-form.php", {"ContactID": ContactID});
    });
});

What is not functioning is this seems to only be passing the first record variable and no others. I can click on the first record and the external page with data loads. I click on other records and the div does not load with new data from click. I have a page that creates a customer list from a mysql query, inside the record loop is a hidden input field with the primary key. Any thoughts on what I am missing? I thought maybe to unbind click, but that did not work either.

HTML Code

<div id="record"><?php do { ?><input type="hidden" name="ContactID" id="ContactID" value="<?php echo $row_tm_reserves['ContactID']; ?>"><!-- Other strings --><?php } while ($row_tm_reserves = mysql_fetch_assoc($tm_reserves)); ?></div>  

Help! and Thanks in advance!

Answer 1

This is the problem with event delegation , change

$("#record").click(function(){

});

to

$(document).on("click","#record",function(){

});

Mainly make sure you have only one id as record in your page.

Answer 2

您应该发布html代码，以帮助我们为您提供帮助...如果添加了新的dom元素，则无法在其上附加操作的脚本，因为在该脚本加载时它们不存在。

$(document).on("action","element",function()

Answer 3

The problem is that #form content gets replaced on every load .

My solution:

You can create a new element inside #form , for example a <p> , and append to it, ie :

$(document).ready(function(){
$("#form").load("tm-reserves-form.php");
$(document).on("click","#record",function(){
    var ContactID = document.getElementById('ContactID').value;
    $("#form").append($(document.createElement("p")).load("tm-reserves-form.php", {"ContactID": ContactID}));
    });
});