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中有一个标题，有一个关闭按钮（图像）。现在我使用jquery将标题div复制到可拖动标题中。

...

/* 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（＆＃39; noclick＆＃39）; ..

如何在jquery提供的draggable

的标题区域内启用click

Answer 1

不会触发具有类closeme的元素上的click事件，因为元素是在文档就绪状态之后加载的。在这种情况下，您应该使用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小时前

感谢您解决我的问题。

这就是我所做的一切

function 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*/

}

function 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 draggable的标题

2 个答案: