无法从bootstrap弹出窗口的输入元素中获取值

Unable to fetch values from an input element in Bootstrap's popover

本文关键字：元素 输入 获取 窗口 bootstrap      更新时间：2023-09-26

我试图从一些输入字段中获取值，这些字段放在一个引导弹出窗口中。但是我得到的是空字符串

复杂性:表单中有一个按钮，当你点击这个按钮时，弹出窗口出现2个输入字段和一个按钮。当我们单击按钮时，我想捕获这2个字段的值。如果我把这些字段放在一个表单中，那么它将成为嵌套的表单。

下面是我的代码。

<button type="button" class="btn btn-danger popper hyperlink" data-toggle="popover">Trial</button>
<div class="popper-content hide">
   <input type="text" class="form-control" id='urlLabel' placeholder="URL Label">
   <input type="text" class="form-control url" id='url' placeholder="Complete URL">
   <button type="button" class="btn btn-default btn-block urlDetails">Done</button>
</div>

我获取值的方式

$('.urlDetails').click(function(){
  console.log('clicked');
  console.log($('#urlLabel').val());
  console.log($('#url').val());
})

这是我的JSFiddle覆盖上述情况

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());
    })
});

我想你拼错了

$(document).ready(function() {
  $('.urlDetails').click(function(){
  console.log('clicked');
  console.log($('#urlLabel').val());
  console.log($('#url').val());
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-danger popper hyperlink" data-toggle="popover">Trial</button>
<div class="popper-content hide">
   <input type="text" class="form-control" id='urlLabel' placeholder="URL Label">
   <input type="text" class="form-control url" id='url' placeholder="Complete URL">
   <button type="button" class="btn btn-default btn-block urlDetails">Done</button>
</div>

这是一个工作代码

相关文章：