Problem with button click and alert on button in Bootstrap Popover

Could you take a look at this demo and let me know why

$(".onealert").on("click",function(){
    alert("You clicked on A");
});

      

does not work?

here is the code i have:

<div class="the-box">
    <div class="pull-right btn-group btn-group-sm" id="downloadSelect">
        <button type="button" class="btn btn-default">1</button> 
        <button href="#" class="trigger btn btn-default">2</button> 
        <button type="button" class="btn btn-default">3</button>
    </div>
    <div class="head hide">Alphabet Select</div>
    <div class="content hide">
        <div class="form-group">
            <div class="btn-group btn-group-sm">
                <button type="button" id="1Download" class="btn btn-default onealert">A</button>
                <button type="button" id="2Download" class="btn btn-default">B</button>
                <button type="button" id="3Download" class="btn btn-default">C</button>
            </div>
        </div>
    </div>
</div>

      

I don't get the error either!

thank

+3


source to share


1 answer


This is because Bootstrap creates new markup for the small dialog when it pops up using the hidden markup just as a template, which means dynamic content that didn't exist when the event handler was added and you need a delegated handler

$('.the-box').on("click", ".onealert", function(){
    alert("You clicked on A");
});

      



FIDDLE

+8


source







All Articles