How to select single element value which created dynamically in html using jQuery / Javascript?

Question

I have a scenario like this:

for (var k in active) {
        notifications.append(
            '<a href="javascript:toast();">' +
            '<div>' +
            '<input class="phone_number" type="hidden" id='+active[k].phone_number+' value='+active[k].phone_number+'>'+
            '</input>'+
            '<span class="notify bg-blue">' + '<i class="fa fa-clock-o"></i>' + '</span>' +
            '<span>' +
            '<span>Sim ' + active[k].phone_number + ' Expires in ' + active[k].expiry_count + 'days</span>' +
            '<br/>' +
            '<span class="time">Just Now</span>' +
            '</span>' +
            '</div>' +
            '</input>'+
            '</a>');
    }

i created dynamic elements using jade template engine. here i need to identify each <a> click and i nedd to get the value of hidden field.

function toast() {
    var grade;
    //var phone_number=document.getElementById('phone_number').value;
    $.each($('.phone_number'), function () {
                    grade = $(this).val();
        alert(grade);
    });
}

by doing this i got a loop of value. which i didn't want. i need single item value. how to solve this ?

gurvinder372 · Accepted Answer · 2017-09-26 05:30:11Z

3

pass this to the toast

 '<a href="javascript:toast(this);">' +

and change the toast method to

function toast( thisObj ) 
{
    var grade = $( thisObj ).parent().find( '.phone_number[type="hidden"]' ).attr( "value" );
    alert( grade );
}

answered Sep 26, 2017 at 5:30

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

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

6 Comments

gurvinder372 Over a year ago

can you put a console log statement in the toast and tell me what is the grade value?

user7014817 Over a year ago

bro the toast function not invoking.

gurvinder372 Over a year ago

was it invoking earlier? Can you create a snippet so that current issue can be replicated and verified?

user7014817 Over a year ago

bro now its invoked, but got no value. i got undefined (i am using jade templating engine),

gurvinder372 Over a year ago

I don't think Jade has a role to play once if you are appending markup to an element this way. Using @krishnar's code, can you replicate the issue you are facing?

|

krishna raikar · Accepted Answer · 2017-09-26 05:42:20Z

1

notifications = $(".notifications")

active = [{ phone_number: "982334",expiry_count: "1"},
         { phone_number: "982334",expiry_count: "1"}]
var k;
for (var k in active) {
         
        notifications.append(
            '<a href="javascript:toast();">' +
            '<div>' +
            '<input class="phone_number" type="hidden" id='+active[k].phone_number+' value='+active[k].phone_number+'>'+
            '</input>'+
            '<span class="notify bg-blue">' + '<i class="fa fa-clock-o"></i>' + '</span>' +
            '<span>' +
            '<span>Sim ' + active[k].phone_number + ' Expires in ' + active[k].expiry_count + 'days</span>' +
            '<br/>' +
            '<span class="time">Just Now</span>' +
            '</span>' +
            '</div>' +
            '</input>'+
            '</a>');
    }
    
    
      $(document).on('click', 'a', function(){
         
          alert($(this).find('.phone_number').val())
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class="notifications"></div>

Its simple.Try this

    $(document).on('click', 'a', function(){
          alert($(this).find('.phone_number').val())
    })

edited Sep 26, 2017 at 5:42

answered Sep 26, 2017 at 5:33

krishna raikar

2,66511 silver badges23 bronze badges

7 Comments

krishna raikar Over a year ago

@AnonymousObject try this

user7014817 Over a year ago

bro its working but, it invoking multiple times and some times i got undefined value.

krishna raikar Over a year ago

@AnonymousObject try now. I given sample snippet as well.

krishna raikar Over a year ago

@AnonymousObject I hope you got the solution. If you found it useful please upvote and accept answer.Thank YOU

user7014817 Over a year ago

bro i am using jade template, i dont know what the error is, i still got multiple alert messages on single click .

|

Nachshon Schwartz · Accepted Answer · 2017-09-26 05:30:49Z

0

Send the toast function the k you are iterating over

'<a href="javascript:toast(' + k + ');">'

then use k in your function

function toast(k) {
   //use k (maybe select by id)
}

answered Sep 26, 2017 at 5:30

Nachshon Schwartz

15.9k20 gold badges65 silver badges99 bronze badges

Collectives™ on Stack Overflow

How to select single element value which created dynamically in html using jQuery / Javascript?

3 Answers 3

6 Comments

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related