Question

基本上我有一个下拉菜单＆lt; select＆gt;列出了一些项目/模型，这些项目/模型在被选中时会触发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>

在表格中我有一个＆＃34;预览＆＃34;按钮，显示对话框弹出窗口，预览项目的显示方式。

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

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

在加载或刷新页面时，一切都按预期工作，但是当通过AJAX动态更新/更改原始内容时，对话框部分会中断。对此进行研究我发现旧的引用建议修改代码以使用live（），但已阅读已弃用并在on（）上使用？我对所有这一切仍然相当新，从我在网上找到的试验和错误的例子总是最终出错。希望有人可以共享资源或者可能提供一些帮助。谢谢。

<!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>

Answer 1

要么你能成功重新获得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");
});

我猜你#opener元素中有#wrapper。如果没有，则尝试委托给最近的父母或$(document)。

Answer 2

变化：

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

要：

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

$("#elem").click()仅绑定到页面上当前的元素。将事件放在文档本身上将允许事件处理新创建的元素。

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

2 个答案: