bootstrap获取弹框数据,无法从Bootstrap弹出窗口中的输入元素中获取值

I'm trying to fetch values from some input fields that are placed in a Bootstrap Popover. But I get empty string.

Complexity: There is a button within a form, when you click this button a popover appears with 2 input fields and a button. I want to capture the values of these 2 fields when we click the button. If I put these fields in a form, then it would become nested forms.

Following is my code.

Trial

Done

My way of fetching values

$('.urlDetails').click(function(){

console.log('clicked');

console.log($('#urlLabel').val());

console.log($('#url').val());

})

Here is my JSFiddle covering the above case.

解决方案Try following code:

$(document).ready(function() {

$(document).on('click', '.urlDetails', function() {

console.log('clicked');

console.log($('.popover-content').find('#urlLabel').val());

console.log($('.popover-content').find('#url').val());

})

});