Assistance with rebinding jQuery following dynamic loaded AJAX content

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.

<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. 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()? 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>

What does the html look like? I'm curious if the dialog is nested in inside #item_table. — KJ Price, Jun 13 '14 at 18:43
possible duplicate of [jquery click doesnt work on ajax generated content](http://stackoverflow.com/questions/9344306/jquery-click-doesnt-work-on-ajax-generated-content) — Nano, Jun 13 '14 at 18:44
I've added the code of how the page is laid out removing the majority of form input fields. Basically the layout is `
form elements
Preview HTML contents
` — Mike B., Jun 13 '14 at 19:25

score 0 · Answer 1 · answered Jun 13 '14 at 18:51

Either you can rebind in success method of 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. if not then try to delegate to the closest parent or to $(document).

score 0 · Answer 2 · answered Jun 13 '14 at 19:00

0

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. Placing the event on the document itself will allow the event to work on newly created elements.

answered Jun 13 '14 at 19:00

MaKR

1,882
2
17
29

Web Console in Firefox gives the following error “Error: cannot call methods on dialog prior to initialization; attempted to call method 'open' jquery-1.10.2.js:516” after AJAX content is dynamically updated / changed and pressing the “Preview” (#opener) button. Also, both functions functions need to be refreshed after AJAX content is switched out (i.e., `$("#wrapper").dialog({ autoOpen:false`...) otherwise the contents of #wrapper are displayed after swap. – Mike B. Jun 13 '14 at 19:20
I should have mentioned it should have been wrapped inside a DOM ready event, something like $(document).on('ready', function() {$(document).on('click', '#elem', function() {});}); – MaKR Jun 17 '14 at 14:53

Assistance with rebinding jQuery following dynamic loaded AJAX content

2 Answers2