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

Question

Basically I have a page that has a drop down <select> listing a number of items / models which when selected triggers an AJAX call to dynamically display a form with all the details pertaining to that model to allow editing and updating. 基本上，我的页面上有一个下拉列表<select>，其中列出了许多项目/模型，这些项目/模型在被选中时会触发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>

Within the form I have a "preview" button which displays dialog popup giving a preview of how the item will be displayed. 在表单中，我有一个“预览”按钮，该按钮显示对话框弹出窗口，预览该项目的显示方式。

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

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

Everything works as intended when the page is loaded or refreshed, but the dialog portion breaks when the original content is dynamically updated/changed via AJAX. 加载或刷新页面时，所有内容均按预期工作，但是当通过AJAX动态更新/更改原始内容时，对话框部分中断。 Doing research on this I'm finding old references suggesting modifying the code to use live(), but have read that is deprecated and to use on()? 正在对此进行研究，发现有旧参考文献建议修改代码以使用live（），但已阅读不赞成使用的代码并使用on（）？ I am still fairly new to all of this and from the examples I've found on the net going through trial and error has always ended up in error. 对于所有这些我还是很陌生的，从网上发现的经过反复试验的例子中，我总是发现错误。 Hoping someone can share a resource or possibly offer some assistance. 希望有人可以共享资源或可能提供一些帮助。 Thank you. 谢谢。

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

Either you can rebind in success method of ajax: 您可以使用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");
    });
}

or you can try with event delegation: 或者您可以尝试使用事件委托：

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

i guess you have #opener in #wrapper element. 我猜你在#wrapper元素中有#opener 。 if not then try to delegate to the closest parent or to $(document) . 如果不是，则尝试委派给最接近的父级或$(document) 。

Answer 2

Change: 更改：

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

To: 至：

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

$("#elem").click() only binds to the elements currently on the page. $("#elem").click()仅绑定到页面上当前的元素。 Placing the event on the document itself will allow the event to work on newly created elements. 将事件放置在文档本身上将允许事件在新创建的元素上运行。

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

问题描述

2 个解决方案

解决方案1
0 2014-06-13 18:51:00

解决方案2
0 2014-06-13 19:00:08

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

问题描述

2 个解决方案

解决方案1 0 2014-06-13 18:51:00

解决方案2 0 2014-06-13 19:00:08

解决方案1
0 2014-06-13 18:51:00

解决方案2
0 2014-06-13 19:00:08