Question

我正在尝试为我的网站创建一个通知系统，但由于某些未知原因而出现问题。当用户点击它时，我有一个链接，它会触发JavaScript函数，然后检查是否隐藏div，如果它被隐藏，它会显示它并在div内加载PHP脚本。

我可能忽略了一些事情

我的JavaScript代码：

// show notifications
$(".noti_bubble").click(function () {
    // check the visibility of the element
    if($(".show-note").is(":hidden")) {
        $(".show-note").show();
        alert('noti_bubble has been perform');
        $(".show-note").load("scripts/notifications.php");
    }else{
        $(".show-note").hide();

    }

});

我的HTML代码：

<div style="width:900px; margin:0 auto;">
<div style="width:250px; float:right;">

<div class="dhtmlgoodies_contentBox" id="box1">
<div class="dhtmlgoodies_content" id="subBox1">
<!-- slide down content goes here -->
<div id="notiHeading" class="notiHeadingContent">
<strong>Notifications</strong>
</div>

<div class="notif_barline"></div>

<div id="notifyContent">

<div class="show-note"></div>

</div>

</div>
</div>

</div>
</div>

.show-note的css也为display:none;。

可点击链接：

<a href="#" id="dhtmlgoodies_control"  onclick="return false" onmousedown="javascript:slidedown_showHide('box1');" class="noti_bubble">(0)</a>

Answer 1

http://jsfiddle.net/9M396/

HTML

<div style="width:500px; margin:0 auto;">
    <div style="width:250px; float:right;">    
        <div class="dhtmlgoodies_contentBox" id="box1">
            <div class="dhtmlgoodies_content" id="subBox1">
            <!-- slide down content goes here -->
                <div id="notiHeading" class="notiHeadingContent">
                    <strong>Notifications</strong>
                </div>

                <div class="notif_barline"></div>

                <div id="notifyContent">                
                    <div class="show-note"></div>                
                </div>            
            </div>
        </div>
    </div>
</div>
    <a href="#" id="dhtmlgoodies_control" onmousedown="javascript:slidedown_showHide('box1');" class="noti_bubble">(0)</a>

JS：

// show notifications
$(".noti_bubble").click(function () {
    var div = $(".show-note");

    if(div.is(":hidden")) {
        div.show();
        div.load("/echo/json/?json={}");
    }else{
        div.hide();
    }

    return false;
});

的CSS：

div
{
    border: 1px solid black;
}

.show-note
{
    min-height: 100px;
    display:none;
}

Answer 2

添加complete callback to .load()：

$(".show-note").load("scripts/notifications.php", function(response, status, xhr) {
    alert(status);
});

jquery show和trigger元素

2 个答案: