Click function not hit outside the loop function

Question

As title above. My click event is not hitting when i click my button. I made my button via JS Loop. My click event function is in outside of my loop function. As I notice when i am debugging, when i try to put it inside the function of the loop the click function it's hitting properly now.

Is there any reason why?

for (var i = 0; i < dataLength; i++) {
    var docsLength = data.data[i].resultData;
    var title = data.data[i].resultData[i].Type.Description;
    var card = '<div class="card" id="HelloWorld_' + i + '"> <div class="card-header bg-success"><h3 class="card-title">' + title + ' </h3 ></div> <div class="card-body"> </div>'
    $("#card_documents > .card-body").append(card);

    for (var b = 0; b < docsLength.length; b++) {
        var id = "HelloWorld_" + i;
        var row = '<div class="row mt-2" style="font-size:20px">'
            + '<div class="col-md-1"><input type="checkbox" style="height:20px; -webkit-box-shadow:none" class="form-control flat mt-2"> </div >'
            + '<div class="col-md-1"> <input type="button" id="btnClickHello' + b + "" + i + '" value="Upload"></div>'
            + '<div class="col-md-10" style="color:green"> ' + data.data[i].resultData[b].Docs + ' </div >'
            + '</div >';
        $("#" + id + " > .card-body").append(row);
    }
}



$("#btnClickHello21").click(function (e) {
    e.preventDefault();
    alert("a");
});

You need to wrap your click event function into a document.ready function. — Martin
– Martin, Commented Sep 17, 2018 at 6:48
@KiRa Why have you used the number '21' specifically for the click event? Is there any reason? — Jones Joseph
– Jones Joseph, Commented Sep 17, 2018 at 6:53
@JonesJoseph i will edit it soon. Its just my testing for now if it is working or not. — KiRa
– KiRa, Commented Sep 17, 2018 at 6:53

Nikhil Aggarwal · Accepted Answer · 2018-09-17 06:47:23Z

1

For dynamically added elements, you need to use jQuery.on

$(".card-body").on("click", "#btnClickHello21", function (e) {
    e.preventDefault();
    alert("a");
});

answered Sep 17, 2018 at 6:47

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

KiRa Over a year ago

like you said when element is dynamically added I should use on right?. Like on my problem?

Nikhil Aggarwal Over a year ago

@KiRa - Yes and make sure you bind the event the available parent element at the moment.

Nikhil Aggarwal Over a year ago

@KiRa - Glad to help you :)

Martin · Accepted Answer · 2018-09-17 06:51:30Z

1

Another way of doing it (despite the 2 answers already), is by wrapping your click event function into a document.ready function.

$( document ).ready(function() {
    $("#btnClickHello21").click(function (e) {
        e.preventDefault();
        alert("a");
    });
});

jQuery document.ready docs: http://learn.jquery.com/using-jquery-core/document-ready/

answered Sep 17, 2018 at 6:51

Martin

2,4221 gold badge14 silver badges23 bronze badges

3 Comments

Martin Over a year ago

And that doesn't work? I don't see the document.ready block in your question, so that's why I suggested it.

KiRa Over a year ago

in my post i didn't include it. sorry

Martin Over a year ago

No problem, just wanted to point that out, despite the already 2 working answers that you received. Always good to have multiple angles to broaden ones knowledge. :)

Praveen Poonia · Accepted Answer · 2018-09-17 06:54:14Z

1

You are adding element dynamically, that is why click event is not working beacuse all click events get bind to DOM on load. To enable click on dynamically added element you can use below code -

$('body').on('click', '#btnClickHello21', function(e) {
  e.preventDefault();
  alert("a");
});

This will work for all a tags with #btnClickHello21 in the body, whether already present or dynamically added later.

answered Sep 17, 2018 at 6:54

Praveen Poonia

76510 silver badges18 bronze badges

Comments

Negi Rox · Accepted Answer · 2018-09-17 11:22:22Z

-1

as per my knowledge it is not hitting because you are not wrapping your function within a document.ready(). DOM and function is loaded before you create a button.

you need a event delegation concept like.

$(document).ready(function(){
  $("#btnClickHello21").on('click',function(){
            //do your stuff.
    });

})

edited Sep 17, 2018 at 11:22

answered Sep 17, 2018 at 6:50

Negi Rox

3,9421 gold badge14 silver badges18 bronze badges

Collectives™ on Stack Overflow

Click function not hit outside the loop function

4 Answers 4

3 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related