点击Bootstrap下拉列表<a> doesn&#39;t call jquery function

Question

Basically what I want to do is let the user specify a contact method. I added a bootstrap dropdown panel like this:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Telephone</a></li>
    <li><a href="#">Email</a></li>
    <li><a href="#">Skype</a></li>
  </ul>
</div>

When I click on one of these links, I want to trigger a jquery function that .appends() an input like this one to the parent element:

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

For some reason, it's not working. When I click on one of the links, the input-group doesn't get appended.

I 'debugged' a little bit and I know that the problem is in the click event, because when I append it using an onload() function, the input-group appears.

By the way, I'm calling this jquery method:

$('#the_links_id').click(function() {$('parent').append(input-group)})

Thank you so much.

Answer 1

$（＆＃39; parent＆＃39;）无法工作，您需要附加整个字符串：

$('#phone').click(function() {
    $(this).parent().append('<div class="input-group"><span class="input-group-addon" id="basic-addon1">@</span><input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div>')
})

http://jsfiddle.net/qc52guu7/