Div('click')不在容器内工作

时间:2017-07-05 13:00:12

标签: jquery html css

我找不到合适的答案,所以我问它: 每当我单击所选的div时,它就不会运行该函数。 这是代码:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    </head>
    <body>
    <textarea class="txt" onfocus="t()"></textarea>
    <div class="extension">
        <div class="dlr">$</div>
    </div>
    </body>
</html>

CSS:

div.extension{
    position:fixed;
    left:0;bottom:0;
    width:100%;height:40px;
    background:darkgray;
}div.extension div{
    position:relative;
    left:0;top:0;
    width:25px;height:36px;
    background:white;
    border:none;border-radius:3px;
    margin:2px 0 0 8px;
    padding:0;
    font-size:1em;
    font-weight:900;
    font-family:arial;
    text-align:center;
    line-height:36px;
}.txt{
    position:absolute;
    left:0;top:0;
    width:100%;height:100%;
    border:none;border-radius:0;
    background:#222;
    color:#ccc;
    font-family:monospace;
}

JS:

$(function(){
  $('div.extension').toggle(false);
  $('.txt').blur(function(){
    $('div.extension').toggle(false);
  });
  $('div.extension div.dlr').on('click',chr);
});
function t(){
  setTimeout(a,1);
}
function a(){
  $('div.extension').css({
    top:(window.innerHeight-40)+'px'
  });
  $('div.extension').toggle(true);
}
function chr(){
  $('.txt').append('$');
  $('.txt').focus();
}

这是链接: http://www.sololearn.com/app/jquery/playground/Wq4l9mnCO460/

聚苯乙烯。 <div class="dlr" onclick="chr()">$</div>也不起作用。

更新

我可能发现了问题,我根本不知道如何解决它。当我从父项中删除div.dlr并将其放在正文中时,它工作正常,但我希望它相对于父级设置样式。

1 个答案:

答案 0 :(得分:0)

$( document ).ready(function() {
$('div.extension div.dlr').on('click',chr);
});

试试这个