在jQuery中获取文本输入值val始终为空

Question

I'm fetching the value the user has put into a text field in Jquery but the value is empty. Maybe I'm doing something wrong here or maybe I'm trying to access a clone of something istead of the real element because the inputed value is inside a popover in a fullcalendar. And I'm using bootstrap. Here is my code.

 $(document).on('click', '#saveEvent', function () { //save to db var yogaspaceid = $("#HiddenYogaSpaceId").val(); var eventTitle = $("#eventTitle").val(); // always empty //var eventTitle = $("#eventTitle").attr('value'); //always emtpy var eventStartTime = $( "#timeSelect" ).val(); var eventDuration = $("#timeDuration").val(); $.post( '/ManageSpaces/SaveNewEvent', { id: yogaspaceid, title: eventTitle, startTime: eventStartTime, duration: eventDuration} ); $calPopOver.popover('destroy'); //refresh callendar or add new event then re render }); 

 <div id="eventcalendar"> <div class="col-md-10"> <div id='fullcalendar' style="width:100%"></div> <div id="day-popover-head" class="hide">Add Event</div> <div id="day-popover-content" class="hide"> @*<form role="form">*@ <div class="form-group"> <label for="eventTitle">Title:</label> <input type="text" id="eventTitle" class="form-control"> </div> <div class="form-group"> <label for="timeSelect">Select time:</label> <select class="form-control" id="timeSelect"> </select> <br> <label for="timeDuration">Select duration:</label> <select class="form-control" id="timeDuration"> <option value="30">30 min</option> <option value="45">45 min</option> <option value="60">60 min</option> <option value="75">75 min</option> <option value="90">90 min</option> <option value="105">105 min</option> <option value="120">120 min</option> </select> </div> <div class="form-inline"> <button type="button" id="saveEvent" class="btn btn-default">Submit</button> <button type="button" id="cancelEvent" class="btn btn-default">Cancel</button> </div> @*</form>*@ </div> </div> <div id="eventDetails" class="col-md-2 collapse" style="background-color:yellow;"> hello </div> </div> 

Answer 1

Had to use

var eventTitle = $(".popover #eventTitle").val();

not sure why I had to use .popover in the call, but found the solution here