Javascript 协助在动态加载AJAX内容后重新绑定jQuery_Javascript_Jquery_Html_Ajax

Javascript 协助在动态加载AJAX内容后重新绑定jQuery

javascript jquery html ajax

Javascript 协助在动态加载AJAX内容后重新绑定jQuery,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,基本上，我有一个页面，其中有一个下拉列表，列出了许多项/模型，选中这些项/模型时，会触发一个AJAX调用，动态显示一个表单，其中包含与该模型相关的所有细节，以允许编辑和更新 <script type="text/javascript"> function item_loader(x) { req = $.ajax({ type: "GET", url: x, datatype: "html", success:

基本上，我有一个页面，其中有一个下拉列表，列出了许多项/模型，选中这些项/模型时，会触发一个AJAX调用，动态显示一个表单，其中包含与该模型相关的所有细节，以允许编辑和更新

<script type="text/javascript">
function item_loader(x) {
    req = $.ajax({
        type: "GET",
        url: x,
        datatype: "html",
        success: function(data){
            $('#item_table').html(data);
        }
    });
}
</script>


功能项_加载器（x）{
req=$.ajax({
键入：“获取”，
网址：x，
数据类型：“html”，
成功：功能（数据）{
$（'#item_table'）.html（数据）；
}
});
}

在表单中，我有一个“预览”按钮，显示对话框弹出窗口，提供项目如何显示的预览

<script>
$(function(){
    $("#wrapper").dialog({
        autoOpen:false,
        width:780,
        height:800,
        title: 'Item Preview'
    });

    $("#opener").click(function() {
        $("#wrapper").dialog("open");
    });
});
</script>


$（函数（）{
$（“#包装器”）。对话框({
自动打开：错误，
宽度：780，
身高：800，
标题：“项目预览”
});
$（“#开场白”）。单击（函数（）{
$（“#包装器”）。对话框（“打开”）；
});
});

当加载或刷新页面时，一切都正常工作，但当原始内容通过AJAX动态更新/更改时，对话框部分会中断。对此进行研究时，我发现旧的参考文献建议修改代码以使用live（），但读过不推荐使用的内容并在（）上使用吗？我对这一切还是相当陌生的，从我在网上找到的例子来看，经过反复试验，总是以错误告终。希望有人能分享资源或提供一些帮助。多谢各位

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Basic Page</title>

<script type="text/javascript" src="/JS/jquery-1.10.2.js"></script>
<script type="text/javascript" src="/JS/jquery-ui-1.10.4.custom.js"></script>
<script type="text/javascript" src="/JS/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript" src="/JS/tinymce/tinymce.min.js"></script>

<link rel="stylesheet" type="text/css" href="/css/intranet-theme/jquery-ui-1.10.4.custom.css"/>

<script type="text/javascript">
function item_loader(x) {
    req = $.ajax({
        type: "GET",
        url: x,
        datatype: "html",
        success: function(data){
            $('#item_table').html(data);
        }
    });
}
</script>

<script>
$(function(){
    $("#wrapper").dialog({
        autoOpen:false,
        width:780,
        height:800,
        title: 'Item Preview'
    });

    $("#opener").click(function() {
        $("#wrapper").dialog("open");
    });
});
</script>

</head>
<body bgcolor='#FFFFFF'>

<form>
        <select name="period_select" id="item_dropdown" onChange="javascript:item_loader(this.value);">
        <option value="Item_AJAX.php?Model_ID=0"> Choose Model</option>
        <option value="Item_AJAX.php?Model_ID=404">AEROCOOL 100</option>
        </select>
</form>

<div id="item_table" align="center">
<!-- Start of AJAX Dynamic Content -->

<form method="POST" enctype="multipart/form-data" action="" name="model_item">
<input name="Start_Special" type="hidden" value="2014-06-01"/>
<input name="Model_ID" type="hidden" value="model_id"/>

<table border="1" width="800">
<tr>
<td colspan="3" align="center">

[Form displaying item details for editing]

</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" name="Update_Model" value="Save Model Info"/>
<input type="submit" name="Update_Listing" value="Update Listing"/>
<input type="submit" name="Delete" value="Remove Item"/>
<button type="button" id="opener">Preview</button>
<div id="wrapper" align="center">
<!-- Start of Hidden diolog Content -->

[Hidden Preview Content]

<!-- End of Hidden dialog Content -->
</div>
</td>
</tr>

</table>
</form>
<!-- End of AJAX Content -->
</div>

</body>
</html>


基本页
功能项_加载器（x）{
req=$.ajax({
键入：“获取”，
网址：x，
数据类型：“html”，
成功：功能（数据）{
$（'#item_table'）.html（数据）；
}
});
}
$（函数（）{
$（“#包装器”）。对话框({
自动打开：错误，
宽度：780，
身高：800，
标题：“项目预览”
});
$（“#开场白”）。单击（函数（）{
$（“#包装器”）。对话框（“打开”）；
});
});
选择模型
AEROCOOL 100
[显示要编辑的项目详细信息的表单]
预览
[隐藏预览内容]

您可以在ajax的成功方法中重新绑定：

success: function(data){
    $('#item_table').html(data);
    $("#wrapper").dialog({
       autoOpen:false,
       width:780,
       height:800,
       title: 'Item Preview'
    });

    $("#opener").click(function() {
       $("#wrapper").dialog("open");
    });
}

或者您可以尝试使用事件委派：

$("#wrapper").on("click", "#opener", function() {
    $("#wrapper").dialog("open");
});

我猜在

#wrapper

元素中有

#opener

。如果没有，则尝试委托给最近的父级或

$（文档）

更改：

$("#opener").click(function() {
    $("#wrapper").dialog("open");
});

致：

$（“#elem”）。单击（）

仅绑定到页面上当前的元素。将事件放在文档本身将允许事件处理新创建的元素。

html是什么样子的？我很好奇该对话框是否嵌套在#item_表中。可能重复我添加了页面布局代码，删除了大多数表单输入字段。基本上，Firefox中的布局是

form elementsPreviewPreview HTML内容Web控制台出现以下错误“错误：初始化前无法在对话框上调用方法；在动态更新/更改AJAX内容并按下“预览”（#opener）按钮后，尝试调用方法“open”jquery-1.10.2.js:516”。此外，在AJAX内容被关闭（即，$（“\35;包装器”）。对话框（{autoOpen:false..）之后，需要刷新这两个函数函数，否则包装器的内容将在交换后显示。我应该提到它应该被包装在DOM就绪的事件中，类似于$（document）。on（'ready'，function（）{$（document）.on（'click'，'#elem'，function（）{}；}）；
$(document).on("click", "#opener", function() {
    $("#wrapper").dialog("open");
});