jquery 单击功能在 div 内部不起作用，在 div 外部起作用

Question

创建一个应用程序，点击事件和功能在 div 的内部元素上不起作用，在父 div 上正常工作 html 是

<div class="chat_wrapper">
   <span class="fa fa-minus minimize"></span>
        <div class="module" id="45-module" style="height: 316px;">
            <div class="top-bar">
                <div class="left">
                    <span class="icon typicons-message"></span>
                    <h1 class="username">rudra-chat</h1>
                </div>
                <div class="right">
                    <span class="fa fa-plus maximize" style="display:none"></span>
                </div>
            </div>
            <ol name="log" id="45-log" class="discussion"></ol>
            <div class="message" id="45-msg">
                <input type="text" name="message" id="message" onkeypress="sendmessage(this,event);">
            </div>
        </div>
    </div>

我正在为 onlick 尝试这个

$(document).ready(function(){
    $('.minimize').click(function() {
        alert('sadg');
        $('.module').animate({ height: '30px' }, 500);
        $('.minimize').hide();
        $('.maximize').show();  
    });

    $('.maximize').click(function() {
        $('.module').animate({ height: '316px' }, 500);
        $('.minimize').show();
        $('.maximize').hide();  
    });
});

css 代码为

.chat_wrapper {
    bottom: 0;
    position: fixed;
    right: 167px;
}
.module {
    float: left;
    margin-right: 2px;
    width: 300px;
}
.top-bar:before {
    animation: 1s ease 0s alternate none infinite running pulse;
    background: radial-gradient(#ffffff, #000000) repeat scroll 0 0 rgba(0, 0, 0, 0);
    bottom: -100%;
    content: "";
    left: 0;
    opacity: 0.25;
    position: absolute;
    right: 0;
    top: -100%;
}
.top-bar {
    background: none repeat scroll 0 0 #666;
    color: white;
    overflow: hidden;
    padding: 0.5rem;
    position: relative;
}

但它不工作 没有错误 我在 chat_wrapper 单击事件上尝试了相同的功能并且它工作正常

Answer 1

好的，我已经解决了。这背后的问题是 append() 。我附加了 div，因为这是一个聊天应用程序，我认为这种方式行不通，所以我创建了一个简单的 javascript 函数，像这样

function minimize(e)
{
   $(e).parents('.module').animate({
            height: '30px'
        }, 500);
        $(e).hide();
        $(e).next('.maximize').show();


}
function maximize(e)
{
   $(e).parents('.module').animate({
            height: '310px'
        }, 500);
        $(e).hide();
        $(e).prev('.minimize').show();


}

和html喜欢这样

<div class="chat_wrapper">
   <div class="module" id="45-module" style="height: 316px;">
            <div class="top-bar">
                <div class="left">
                    <span class="icon typicons-message"></span>
                    <h1 class="username">rudra-chat</h1>
                </div>
                <div class="right">
 <span onclick="minimize(this)" id="minimize" class="fa fa-minus minimize"></span>
                    <span onclick="maximize(this)" style="display:none" class="fa fa-plus maximize"></span>
                </div>
            </div>
            <ol name="log" id="45-log" class="discussion"></ol>
            <div class="message" id="45-msg">
                <input type="text" name="message" id="message" onkeypress="sendmessage(this,event);">
            </div>
        </div>
    </div>

jquery 单击功能在 div 内部不起作用，在 div 外部起作用

jquery click function is not working inside the div, working on outside div

jquery

onclick