framework 7 on click event work at but not outside

问题

html code

    <div class="toolbar toolbar-bottom" id="">
<div class="myProgress2" id="myProgress2" style="background-color: grey; width:100px;margin-left: 10px">
    <div id="myBar2" class="myBar2" style="width: 3%;height: 10px;background-color:white;"></div>
</div>
<div class="toolbar-inner">
    <div class="myProgress2" id="myProgress2" style="background-color: grey; width:100px;margin-left: 10px">
        <div id="myBar2" class="myBar2" style="width: 3%;height: 10px;background-color:white;"></div>
    </div>
</div>

Look At above code as well as image. use same code but at top most div onclick not working and bellow div onclick working

js (framework 7) code

$$('.myProgress2').on('click', function (e) {
    myApp.alert('tab');
});

i also try with jquery function normal js event listener. i got same result. please help me

回答1:

After toolbar-bottom class toolbar-inner div must be followed. like the one give below.

<div class="toolbar toolbar-bottom tabbar-scrollable bottom-nav" style="background: #a3194c;box-shadow:none;">
    <div class="toolbar-inner">
        <div class="myProgress2" id="myProgress2" style="background-color: grey; width:100px;margin-left: 10px">
            <div id="myBar2" class="myBar2" style="width: 3%;height: 10px;background-color:white;"></div>
        </div>

        <div class="myProgress2" id="myProgress2" style="background-color: grey; width:100px;margin-left: 10px">
            <div id="myBar2" class="myBar2" style="width: 3%;height: 10px;background-color:white;"></div>
        </div>
    </div>
</div>

The way you have written the div will be considered as pseudo-element which is not available for DOM.

来源：https://stackoverflow.com/questions/46165160/framework-7-on-click-event-work-at-div-class-toolbar-inner-div-but-not-ou

标签

javascript