在 jquery ui 可拖动的 header 中启用点击功能

Question

使用的库：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 中有一个 header，带有一个关闭按钮（图片）。现在我使用 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);

..

到目前为止一切顺利。

但是有些东西使图像上的点击事件被禁用。当用户单击 header.

中的图像时，我想触发 jquery 函数

我也试过了，但没有成功

..

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

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

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

/这也行不通/

headerdiv.removeClass('noclick'); ..

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

Answer 1

具有 class 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 ...
});

Answer 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);
}

}

在 jquery ui 可拖动的 header 中启用点击功能

Enable click functionality in jquery ui draggable's header

javascript

jquery

jquery-ui

jquery-ui-draggable