Question

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，找到并且最接近也没什么用，我可以知道什么是正确的遍历。

Answer 1

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

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

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

此外，您在html中指定的课程为sublocation_delete，而不仅仅是delete。所以......出于显而易见的原因，确保一致。

Answer 2

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

$(".delete").live('click', function(){
//Whatever you need to do...
});

Answer 3

试试这个（注意我在第一个按钮上添加了一个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();  
}

如何在里面穿越

3 个答案: