使用 Jquery 和 Php 更新 Dom答案

【问题标题】：Update Dom with Jquery and Php使用 Jquery 和 Php 更新 Dom
【发布时间】：2014-09-22 06:27:00
【问题描述】：

我正在使用 jquery 的 ajax 控件和我使用的 php 文件根据通过 get 请求发送到 php 文件的信息动态创建字段和下拉列表。我遇到的问题是，当 php 动态添加表单时，dom 不会更新以识别新的 dom 元素。

一旦加载请求加载了动态数据，我需要 jquery 继续操作这些新字段，但 jquery 无法识别新的 dom 元素，这使得新的 dom 元素（如按钮）是静态的。是的，所有动态字段都有自己独特的 ID/类。

我试过了：

$("body").on("mouseover mouseout", "select", function(e){

$('#filelocations').change(function(){
var urlforcode = this.value;
var codeserial = encodeURIComponent(urlforcode);
$( "#containcontent" ).load("/include/adminarea.php?edittext="+codeserial);
});
 <-- generic base code, but it only works some of the time.

我的问题是我如何让 jquery 与初始页面加载时不存在的元素进行交互，但允许我在通过 .load 请求动态加载时操纵该数据？

简单的 PHP 切换：

<?php


$statevariable = $_GET["stateSELECT"];

switch ($statevariable) {
case "AL":
echo '<p class="errorstyle margintopspacing" style="background:purple;       color:white;">Some Pricing Data</p><button id="pricingsystem" class="btn btn-primary" >Click To Start Pricing</button>';
break;
case "AK":
echo "Switch1 ".$_GET["stateSELECT"];
break;
case "AZ":
echo "Switch2 ".$_GET["stateSELECT"];
break;
default:
echo "Switch3 ".$_GET["stateSELECT"];
}



?>

简单的 Jquery 事件：

$('#pricingsystem').click(function(){
console.log('The Stuff');
});

【问题讨论】：

查看委托事件learn.jquery.com/events/event-delegation
on() 是答案，所以我猜你使用不正确。请给出一个您所拥有的不使用动态内容的事件侦听器的具体示例，以及动态 html 的示例
@RobSchmuecker 不会由 $(document).on 处理吗？因为所有元素都是主 dom 的子元素。 user574632 我想通了，但不确定 .on 哪里出了问题
是的，因此您需要使用$(document).on('click', '#pricingsystem', function(){...})，如果您要添加的元素不止一个，这将是不正确的，因为它是id
@RobSchmuecker 请将此代码添加为答案。一旦我看到数据处理程序的#pricingsystem，天就开了哈哈。我会接受你的回答，因为我知道这很简单！谢谢！

标签： php jquery dom

【解决方案1】：

添加文件加载时执行的回调函数。

$( "#containcontent" ).load("/include/adminarea.php?edittext="+codeserial, function(){
    // Stuff that must be done when the file is loaded
});

【讨论】：

这适用于这个特定的代码，但不适用于 dom 中不存在的元素，例如，我使用创建按钮的 switch 语句更新了初始问题。我需要 jquery 来触发该按钮以触发加载请求。