Question

当我点击此按钮时，我试图附加一个项目：

<a href="#" class="btn btn-primary">
<span class="glyphicon glyphicon-picture" id="addImageButton" 
onclick="onClickAddImage(this)"/></a>

到此列表：

<ul id="cardList" class="cardList">
  <li class="ui-state-default" data-type="image" onclick="onClickCard(this)">
    Image 01 <img src="./Close.gif" alt="" onclick="onClickClose(this)"/>
  </li>

  <li class="ui-state-default" data-type="image" onclick="onClickCard(this)">
    Image 01 <img src="./Close.gif" alt="" onclick="onClickClose(this)"/>
  </li>
</ul>

我使用的jQuery脚本是：

$('#addImageButton').click(function(){
   $('.cardList').append(
   '<li class="ui-state-default" data-type="image" onclick="onClickCard(this)">Image01 
   <img src="./Close.gif" alt="" onclick="onClickClose(this)"/></li>'
    );
});

有什么问题？

Answer 1

您可以将附加的HTML字符串放在一行中，<span>不是自动结束标记，您需要</span>才能将其关闭。同时删除内联onClick，因为您已经应用了.click()：

$('#addImageButton').click(function () {
    $('.cardList').append('<li class="ui-state-default" data-type="image" onclick="onClickCard(this)">Image01<img src="./Close.gif" alt="" onclick="onClickClose(this)"/></li>');
});

<强> Fiddle Demo

Answer 2

像这样替换你的锚标签

<a class="btn btn-primary"><span class="glyphicon glyphicon-picture" id="addImageButton">Click</span></a>

这样的Jquery代码

$('a #addImageButton').click(function(){
   $('.cardList').append(
   '<li class="ui-state-default" data-type="image" onclick="onClickCard(this)">Image01 
   <img src="./Close.gif" alt="" onclick="onClickClose(this)"/></li>'
    );
});

Answer 3

尝试使用

$('#addImageButton').click(function(){
$('#cardList').append(
'<li class="ui-state-default" data-type="image" onclick="onClickCard(this)">Image01 
<img src="./Close.gif" alt="" onclick="onClickClose(this)"/></li>'
 );
});

jQuery附加到列表单击按钮

3 个答案: