在 jquery ui 可拖动的标题中启用单击功能答案

【问题标题】：Enable click functionality in jquery ui draggable's header在 jquery ui 可拖动的标题中启用单击功能
【发布时间】：2015-11-16 14:51:53
【问题描述】：

使用的库：jquery.blockUI.js,jquery-ui.css,jquery-ui.min.js。

这是一个非常古老的使用 jquery 和 blockui 的维护项目。

我正在使用 blockui 弹出窗口。最近我实现了可拖动功能 ..

$.blockUI(

 {
    message: $('#MyPopUpDiv'),
    theme: true,//Make the pop up draggable
    draggable: true,
    fadeIn: 300,
    fadeOut: 300,
    showOverlay: true,
    centerY: 0

 }
);

.. 我以前在我的 div 中有一个标题，带有一个关闭按钮（图像）。现在我使用 jquery 将 header div 复制到可拖动的 header 中。

/* Get jquery generated header element */

var headerdiv = $('.ui-widget-header');

/* My previous header with close button */

    <div id="divHeaderWithCloseButton">
        <span style="float:left">Please click on cross button to close</span>

        <span class="closeme" style="float: right">
        <img alt="#" src="../../images/close2.jpg">         
    </span>
</div>


 /* Get my previous header div's markup so that I can add my div to header provided by jquery ui */

var appendHdrContent = $("#divHeaderWithCloseButton").html();


/* Remove My previous header div from existing DOM */

$("#divHeaderWithCloseButton").remove();


/* Append my div into header provided by jquery */

headerdiv.html(appendHdrContent);

到目前为止一切顺利。

但是，有些东西正在禁用图像上的点击事件。当用户单击标题内的图像时，我想触发 jquery 函数。

我也试过了，但没有成功

$('.closeme').click(function(){

    /*Nothing is getting fired :( */
    alert('Close button is clicked');

    //blockui code to close the pop 
    -----
    -----
});

/这也行不通/

headerdiv.removeClass('noclick'); ..

如何在 jquery 提供的可拖动标题区域内启用点击

【问题讨论】：

你是在设置headerdiv html之前还是之后添加点击监听？如果你之前做，我建议你做之后。顺便说一句：您指的是图像，但没有图像。
感谢您的友好建议。实际上，我只放置了与我当前关注的相关的 HTML 和 javascript。该图像仅包含一个非常小的十字按钮。
感谢 Bas van Stein 向我展示了正确的方法。你摇滚！
不客气！您可以自己发布并接受它作为答案；）

标签： javascript jquery jquery-ui jquery-ui-draggable

【解决方案1】：

类closeme 的元素上的点击事件不会被触发，因为该元素是在文档就绪状态之后加载的。在这种情况下，您应该使用 jquery 的 delegate 函数。 http://api.jquery.com/delegate/

$('.ui-widget-header').delegate( '.closeme', "click", function() {
  alert('Close button is clicked')
  // the code that actually closes the div here ...
});

【讨论】：

感谢您的友好建议。它有效，你摇滚;）

【解决方案2】：

您是在设置 headerdiv html 之前还是之后添加点击侦听器？如果你之前做，我建议你做之后。顺便说一句：您指的是图像，但没有图像。 – Bas van Stein 17 小时前

感谢您解决了我的问题。

这就是我所做的一切

函数 bindCloseBlockUIpopup() {

/*Bind click functionality to close the pop up div starts*/

$('.closeme').click(function (e) {
    setTimeout($.unblockUI, 50);            
});

/*Bind click functionality to close the pop up div ends*/

}

函数 OpenBlockUIpopup() {

try
{   

    $.blockUI(


         {
            message: $('#MyPopUpDiv'),
            theme: true,//Make the pop up draggable
            draggable: true,
            fadeIn: 300,
            fadeOut: 300,
            showOverlay: true,
            centerY: 0
         }
    );

    /* Get my previous header div's markup so that I can add my div to header provided by jquery ui */

    var appendHdrContent = $("#divHeaderWithCloseButton").html();


    /* Remove My previous header div from existing DOM */

    $("#divHeaderWithCloseButton").remove();


    /* Append my div into header provided by jquery */

    headerdiv.html(appendHdrContent);

    /*Enable popup to close on clicking cross button containing 'closeme' class*/

    bindCloseBlockUIpopup();
}
catch (e) 
{ 
    alert(e);
}

}

【讨论】：