javascript - 为什么 javascript 无法获取 php 生成的 html 的值？

Question

我使用ajax来查询我的mysql到我的数据库。但我对我的 php 生成的 html 表单输入有疑问 - javascript/jquery 根本不会获取该值。从普通的 html 来看当然没有问题。

php(工作正常，所有 echo 都很好)

<?php
function getAge() {
    $age = "<select name='age'>";
    $result = $mysqli->query("select * from ages");
    while ($row = $result->fetch_row()) {
        $age.="<option value=" . $row[0] . ">". $row[1] ."</option>";
    }
    $age.="</select>";

    return $age;
}
?>

html

<form id="myform">
   <input name='name' value='Nick'>
   <input name='sport' value='Football'>
   <?php echo getAge(); ?>
   <input type='submit'>
</form>

JavaScript

$("form#myform").on('submit', function(e){
    e.preventDefault();
    var json = {}
    $.each(this.elements, function(){
        json[this.name] = this.value || '';
    });
}

一切正常，除了无法获取 <select> 的值。 。如果我做一个普通的 html 选择它就可以了..？!还有人知道如何从 json 对象中删除提交按钮吗？ :-)

Answer 1

任何动态生成的 HTML 都不会应用这些事件，因为这些事件是在页面加载时应用的。因此，如果将事件应用于文档，您将能够从动态生成的 html 中提取值。就像这样:

var json = {};
$(document).on('submit', 'form#myform', function(e){
   $('*', this).each(function(){    
        json[$(this).attr('name')] = $(this).val();
   });
});

希望这有帮助!