jQuery附加到按钮的列表单击[关闭]答案

【问题标题】：jQuery appending to list click of button [closed]jQuery附加到按钮的列表单击[关闭]
【发布时间】：2014-06-01 08:40:57
【问题描述】：

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

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

怎么了？

【问题讨论】：

您为什么认为有问题？有什么不符合您的预期吗？它是什么，你期望什么？
检查控制台是否有错误。你所拥有的在逻辑上没有错。
将该事件绑定代码放入 document.ready
没有出现预期的附加效果。而且不知道为什么
那么，没有添加新元素？事件处理程序是否至少被执行？你自己调试过吗？

标签： javascript jquery append

【解决方案1】：

像这样替换你的锚标记

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

【讨论】：

请不要将普通文本格式化为代码并为您的解决方案提供解释。为什么 OP 应该做出这些具体的改变？就我个人而言，我没有看到任何改变代码行为的差异。

【解决方案2】：

尝试使用

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

【讨论】：

为什么 OP 应该这样做？有什么区别？
$('#cardList') 使用而不是 $('.cardList')
为什么要有所作为？为什么元素可以通过它的 id 而不是它的类找到？

【解决方案3】：

您可以将附加的 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

【讨论】：

谢谢！添加解决了这个问题。显然不起作用。