javascript - jquery 显示和触发元素

Question

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

我可能忽略了一些东西

我的 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

将完整的回调添加到.load()：

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