Document not detecting input value

Question

I've had this problem for awhile now and I can't seem to fix it no matter what I do. Basically, my input is not retrieving the value that the user types in the input for some reason..

Here is my code:

$('#aid').one('click', function () { 
    $('.prompt').prepend('<tr class="task"><td class="cell-icon"></td>' +
        '<td class="cell-title"><div>User\'s Object: <input id="inputObject" type="text" style="margin-top: 2px;margin-left:2px"></input>&nbsp;&nbsp; Amount: <input id="inputAmount"' +
        'type="text" style="margin-top:2px;margin-left:2px; padding-right: 0px"></input></div></td>' +
        '<td class="cell-status hidden-phone hidden-tablet"><a class="btn btn-success" style="margin-top:3px">Submit</a></td>' +
        '<td class="cell-time align-right">Just Now</td></div>' +
        '</tr>');
});
$('.btn').click(function () {
    console.log("click");
    var input = document.getElementById('inputObject').value;
    console.log(input);
});

Everything works fine including both clicks, but for some reason it just won't display the input value to the console.

I've also tried: $('#inputObject').val(); but that didn't work either.

I really hope that someone can help me here!

Is the missing close quote on the first jQuery selector a typo or part of the problem? — joews
– joews, Commented Sep 6, 2014 at 14:35
What happens if you replace the console.log with an alert? — Dave
– Dave, Commented Sep 6, 2014 at 14:37

ROMANIA_engineer · Accepted Answer · 2014-09-06 14:53:32Z

1

Another method: use delegate.

$('body').delegate('.btn', "click", function() {
   var inp = document.getElementById("inputObject").value;
   console.log(inp); 
});

Explanation from http://www.w3schools.com/jquery/event_delegate.asp:

The delegate() method attaches one or more event handlers for specified elements that are children of selected elements, and specifies a function to run when the events occur.

Event handlers attached using the delegate() method will work for both current and FUTURE elements (like a new element created by a script).

edited Sep 6, 2014 at 14:53

answered Sep 6, 2014 at 14:48

ROMANIA_engineer

57k30 gold badges211 silver badges207 bronze badges

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

4 Comments

Emre Over a year ago

As of jQuery version 1.7, the on() method is the preferred method for attaching event handlers for selected elements.

ROMANIA_engineer Over a year ago

Yes, it's also specified in the link above. This is why I gave you a like, because you had a good solution. But, delegate has an advantage: the order of parameters. To my mind it's nicer to know which is the element, then which is the event.

Emre Over a year ago

Everybody has their own ways, to my mind it's nicer to use on() :)

ROMANIA_engineer Over a year ago

I agree. Only for the order of parameters I like delegate, but on sounds better - it's more intuitive.

ROMANIA_engineer · Accepted Answer · 2014-09-06 15:07:24Z

1

You are creating your HTML code dynamically so try using:

$(document).on("click",".btn", function(){
    do stuff here... 
});

edited Sep 6, 2014 at 15:07

ROMANIA_engineer

57k30 gold badges211 silver badges207 bronze badges

answered Sep 6, 2014 at 14:35

Emre

15911 bronze badges

Collectives™ on Stack Overflow

Document not detecting input value

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related