Click on button issue on jquery

Question

I needed to click twice button id '#a' in order the console.log('A') display on my console. But once you click already twice then succeeding click works already. I don't understand why on the first attempt need to click twice before it function well. Any Help

<div class="modal fade" id="addData" tabindex="-1" role="dialog" aria-labelledby="myModalAdd" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalAdd">Add Category <small>&raquo; Category</small></h4>
        </div>
        <div class="modal-body">
            <form class="form-horizontal">
                <div id="container-option-add"></div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary btn-sm" id="a">Submit</button>
            <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Cancel</button>
        </div>
    </div>
</div>

$('#addData').on('click', function() {
    $(this).find('#a').off().on('click', function () { 
        console.log('A');
    });               
}).modal();

Answer 1

Because the first time you click the button you are only registering the event listener , which means you were not having listener before that so your code is not executing.

You have to do it like this( jsFiddle ):

$('#addData').on('click', function() {
    if($(event.target).is("#a")){
        console.log('A');
       }

});

Answer 2

When you first click the button (or at least appear to click it),

the event handler is NOT attached to the button at this point, hence the console.log() does not fire.

The event then bubbles up to the parent #addData in this case, and fires the click event of that div .

NOW, the event handler gets attached to the button.

Hence, the next time you click the button, the event handler starts working.

NOTE: the event will still continue to propagate to the parent #addData div.

This should give you a fair idea

Instead of nested click handlers think of it in such a way,

function A(){
    $("#a").off().on("click", function(){
        //do Something
    });
}

Now,

The .on('click') for your button won't be attached until you call A() .

Equating it to your code,

$("#addData").on("click", function(){
    A();
});

Hope that answers your question :) Although, I'd highly recommend that you don't nest event handlers the way you're doing it now.

Answer 3

This may work! I got the answer

$('#addData').on('show.bs.modal', function() {
   $(this).find('#a').off().on('click', function () { 
      console.log('A');
   });               
}).modal();