0

我知道论坛上还有其他关于此的问题，但我似乎无法让它为我工作，所以我想我会自己开始。我想在用户可能点击我页面上的链接的任何地方显示一个 div。HTML是这样的；

<div class="DetailHeaderBar Expanded">
<span class="imgContainer"></span>
<span>John Smith</span>
<img class="TradeDetailsLink" alt="v" src="/Applications/Images/Icons/action_arrow.gif">
<a class="TradeDetailsLink" id="DetailsLink" href="#">Trade Details</a>
</div>

<div id="tradeDetailsSelector" class="ContextMenuPanel" style="position: absolute; display:none;">
    <div id="AvailableMoneyItem" class="ContextMenuItem"><a href="#" onclick="javascript:popupAvailableMoney(); return false;">View Available NFS Money</a></div>
    <div id="OpenOrdersItem" class="ContextMenuItem"><a href="#" onclick="javascript:redirectToTradeCentral(); return false;">View Open Orders</a></div>
    <div id="LockCashBufferItem" class="ContextMenuItem"><a href="#" onclick="javascript:redirectToModelManagement(); return false;">Add/Edit Locks or Cash Buffer</a></div>
</div>

Jquery 在 document.ready() 函数中。我只想在单击“贸易详细信息”链接时直接在“贸易详细信息”链接下显示 TradeDetailsS​​elector div。这段代码是根据另一篇文章修改的，据说可以完美运行，但不适合我。

$("document").ready(function(){
$('div#DetailsLink').bind('click',function(event){
$('#tradeDetailsSelector').css('left',event.pageX);
$('#tradeDetailsSelector').css('top',event.pageY);
$('#tradeDetailsSelector').css('display','inline');
$("#tradeDetailsSelector").css("position","absolute");

});
})

任何人都可以给我的任何帮助都会很棒，现在什么都没有发生，而且 IE 中的开发人员工具没有在控制台中显示任何错误，所以我不知道。谢谢你，尼克

4

1 回答 1

1

工作演示

我从 .bind 更改为.on()，您也可以使用.click ()。我建议在 CSS 文件中使用内联 CSS，就像在我发布的演示中一样。我也删除div了，因为链接不是 div。无论如何，如果你有一个唯一的 ID，你不需要divor 在这种情况下a之前。

这是我为使其工作而进行的更改：

 $('#DetailsLink').on('click', function (event) {

整个代码：

$("document").ready(function () {
    $('#DetailsLink').on('click', function (event) {
        $('#tradeDetailsSelector').css('left', event.pageX);
        $('#tradeDetailsSelector').css('top', event.pageY + 10);
        $('#tradeDetailsSelector').css('display', 'inline');
        $("#tradeDetailsSelector").css("position", "absolute");

    });
})
于 2013-07-23T16:12:51.497 回答