JQuery closest() + find() tree traversal

Question

Given a structure like this:

<div class="portlet">
    <div class="portlet-config">
        <p>Some configuration</p>
    </div>
    <div class="portlet-header">Configurable portlet</div>
    <div class="portlet-content">This has a configuration window. Click on pencil icon to open.</div>
</div>

First, I append these DIVs to portlet-header (to display some buttons)

<div class="portlet-button-container">
    <div class="portlet-button portlet-btn-delete ui-icon ui-icon-close"></div>
    <div class="portlet-button portlet-btn-toggle ui-icon ui-icon-minusthick"></div>
    <div class="portlet-button portlet-btn-config ui-icon ui-icon-pencil"></div>
</div>

Then I apply a jquery-ui dialog() plugin to the portlet-config DIVs

$(".portlet-config").dialog({
    autoOpen: false,
    show: {
        effect: "fade",
        duration: 200
    },
    hide: {
        effect: "fade",
        duration: 500
    },
    modal: true,
    buttons: {
        Ok: function () {
            $(this).dialog("close");
        }
    }
});

Then I add come click handlers

$(".portlet-btn-toggle").click(function () {
    var icon = $(this);
    icon.toggleClass("ui-icon-minusthick ui-icon-plusthick");
    icon.closest(".portlet").find(".portlet-content").toggle();
});

$(".portlet-btn-delete").click(function () {
    var icon = $(this);
    icon.closest(".portlet").hide();
});

$(".portlet-btn-config").click(function () {
    var icon = $(this);
    icon.closest(".portlet").find(".portlet-config").dialog("open");
});

It seems that the portlet-config DIV could not be found when the user clicks on the pencil.

More precisely it seems that:

$(this)                                             // OK, returns an object
$(this).closest(".portlet")                         // OK, returns an object
$(this).closest(".portlet").find(".portlet-config") // NOK, returns null

Here is a fiddle to reproduce the problem: http://jsfiddle.net/silenzioso/M6LmS/

Thanks in advance

Answer 1

Your call to $(".portlet-config").dialog is doing a little more than you expect it to. If you look in the DOM, you can see that the div has been moved out of its original location and added to the end of the document. Presumably it does this for the overlayed dialog effect.

You could consider putting a unique ID on the dialog div so that you can find it again. Perhaps you could use a data attribute to store the associated dialog div ID in the button.

<div class="portlet">
    <div class="portlet-config" id="dialog1">
        <p>Some configuration</p>
    </div>
    <div class='portlet-button' data-config="dialog1"></div>
</div>

...

var id = $(this).data('config');
var config = $('#'+id);

Answer 2

If You are dynamically creating new DOM elements in jQuery make sure You add event click on body or document or other element that is defined from the very first page display (I mean server response):

$('body').on('click', '.portlet-btn-config', function(e){

});