Question

给出这样的结构：

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

首先，我将这些DIV附加到portlet-header（以显示一些按钮）

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

然后我将jquery-ui dialog()插件应用于portlet-config DIV

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

然后我添加了点击处理程序

$(".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");
});

当用户点击铅笔时，似乎无法找到portlet-config DIV。

更准确地说，似乎：

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

这是重现问题的小提琴：http://jsfiddle.net/silenzioso/M6LmS/

提前致谢

Answer 1

您对$(".portlet-config").dialog的致电比您预期的要多一些。如果您查看DOM，您可以看到div已移出其原始位置并添加到文档的末尾。据推测，它可以用于叠加的对话框效果。

您可以考虑在对话框div上放置一个唯一的ID，以便您可以再次找到它。也许您可以使用数据属性在按钮中存储关联的对话框div ID。

<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

如果您在jQuery中动态创建新的DOM元素，请确保在主体或文档或从第一页显示中定义的其他元素（我的意思是服务器响应）添加事件单击：

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

});

JQuery nearest（）+ find（）树遍历

2 个答案: