0

html:

{% for location in locationcheck %}
<input style="float:left;" type="button" class="delete"/>
<label><input style="margin: 0 10px 0 10px;" type="checkbox" checked="True" name="sub_location_key">{{ location }}</label>
<button type="button" style="margin: 1px 120px;" name="delete" id="{{ location.id }}" class="sublocation_delete"/>Delete</button><br />
{% endfor %}

生成的html：

 <input style="float:left;" type="button" class="delete"/>
 <label><input style="margin: 0 10px 0 10px;" type="checkbox" checked="True"  value="1234" name="sub_location_key">Playground</label>
 <button type="button" style="margin: 1px 120px;" name="delete" id="1234" class="sublocation_delete"/>Delete</button><br />

js：

$(".delete").click(function(){
var $this = $(this);
$this.siblings(".sublocation_delete").toggle();

CSS：

.sublocation_delete {
    display:none;
    float: right;
    height: 20px;
    width: 60px;
    -moz-border-radius: 10px;
    border-radius:10px;    
}

删除类和删除按钮是由多个程序动态创建的。单击删除类时，应该会出现隐藏的删除按钮。我试过的上面的代码显示了单击单个“删除”类时的所有按钮。

我尝试使用 nextAll，find 和最接近也没有任何效果，我可以知道什么是正确的遍历。

4

3 回答 3

1

您可以做的是委托侦听器，如下所示：

$('body').on('click', '.delete', function(e) {
    //whatever
}

这将告诉<body>标签将此侦听器分配给在delete其中创建的具有该类的所有元素。您可以对任何其他元素执行相同的操作，即$('div#mydiv').on('click', '.delete', function(e){/*whatever*/})

此外，您在 html 中分配的类是sublocation_delete，而不仅仅是delete. 所以...确保这是一致的，原因很明显。

于 2013-09-09T13:59:56.927 回答
0

对于动态创建的元素，使用 jquery .live() 方法绑定事件。Jquery .on() 或 .click() [或任何其他事件绑定器] 不适用于动态添加的元素。试试这种方式：

$(".delete").live('click', function(){
//Whatever you need to do...
});
于 2013-09-09T13:56:05.353 回答
0

试试这个（注意我在第一个按钮上添加了一个 ID 并更改了切换按钮的 ID）：

{% for location in locationcheck %}
   <input style="float:left;" type="button" id="{{ location.id }}" class="delete"/>
   <label><input style="margin: 0 10px 0 10px;" type="checkbox" checked="True" name="sub_location_key">{{ location }}</label>
   <button type="button" style="margin: 1px 120px;" name="delete" id="btn_{{ location.id }}" class="sublocation_delete"/>Delete</button><br />
{% endfor %}

JS：

$(".delete").click(function(){
   var $this = $(this);
   $("#btn_" + $this.attr("id")).toggle();  
}
于 2013-09-09T14:01:05.187 回答