Javascript jQuery.on(';单击';)
我正在使用django和jQuery构建一个web应用程序,在其中一个页面上,$(document.com('click')…事件会断断续续地触发。我有一个签出队列中的项目列表,并有一个删除每个项目的选项。如果我从列表的顶部到底部,单击事件大部分会触发(但并不总是).如果我从底部开始,有时会触发,有时不会。有些需要2次单击,有些需要6次以上单击才能注册 这是django从模板生成的html:Javascript jQuery.on(';单击';),javascript,jquery,dom,Javascript,Jquery,Dom,我正在使用django和jQuery构建一个web应用程序,在其中一个页面上,$(document.com('click')…事件会断断续续地触发。我有一个签出队列中的项目列表,并有一个删除每个项目的选项。如果我从列表的顶部到底部,单击事件大部分会触发(但并不总是).如果我从底部开始,有时会触发,有时不会。有些需要2次单击,有些需要6次以上单击才能注册 这是django从模板生成的html: <div class="container"> <table id="cart
<div class="container">
<table id="cart" class="table table-hover table-condensed">
<thead>
<tr>
<th style="width:70%">Product</th>
<th style="width:10%" class="text-center">Seller</th>
<th style="width:10%">Price</th>
<th style="width:10%"></th>
</tr>
</thead>
<tbody>
<tr id="product-3653672818">
<td data-th="Product">
<div class="row">
<div class="col-sm-3 hidden-xs"><img src="xyz.com/img.jpg" style="width: 121px; height: 88px;"></div>
<div class="col-sm-9">
<h4 class="nomargin">Product Name</h4>
<p>Product Description</p>
</div>
</div>
</td>
<td data-th="Seller" class="text-center">ONLINE</td>
<td data-th="Price">3.00</td>
<td class="actions" data-th="">
<button class="btn btn-danger btn-sm"><i class="fa fa-trash-o DeleteItem" id="3653672818"></i></button>
</td>
</tr>
<tr id="product-3653492642">
<td data-th="Product">
<div class="row">
<div class="col-sm-3 hidden-xs"><img src="xyz.com/img.jpg" style="width: 121px; height: 88px;"></div>
<div class="col-sm-9">
<h4 class="nomargin">Product #2 Title</h4>
<p>Product #2 Description</p>
</div>
</div>
</td>
<td data-th="Seller" class="text-center">ONLINE</td>
<td data-th="Price">4.00</td>
<td class="actions" data-th="">
<button class="btn btn-danger btn-sm"><i class="fa fa-trash-o DeleteItem" id="3653492642"></i></button>
</td>
</tr>
</div>
好吧,以防其他人遇到这种情况,我最终弄明白了这里发生了什么 我在模板中定义按钮的方式是罪魁祸首:
<button class="btn btn-danger btn-sm"><i class="fa fa-trash-o DeleteItem" id="3653672818"></i></button>
我的jQuery是在$(document).on('click','.DeleteItem'上启动的,它是在“i”html元素中定义的一个类,而不是主按钮类。“fa-trash-o”类是一个小的垃圾箱图标,只占按钮区域的1/3左右
如果你点击按钮中间(直接在垃圾桶上),所有的东西都会起作用。但是如果你点击按钮上的其他地方,什么也没有发生。
修复方法是将“DeleteItem”类定义移动到按钮:
<button class="btn btn-danger btn-sm DeleteItem" id="3653672818"><i class="fa fa-trash-o" ></i></button>
Wow,我很高兴找到了你的帖子。我会花很多时间来解决它。即使在我读了之后,我也认为这不可能是原因,但事实确实如此!
<button class="btn btn-danger btn-sm DeleteItem" id="3653672818"><i class="fa fa-trash-o" ></i></button>