gpt4 book ai didi

javascript - jQuery 间歇性 .on ('click' )

转载 作者:行者123 更新时间:2023-11-30 00:19:55 28 4
gpt4 key购买 nike

我正在使用 django 和 jQuery 构建一个网络应用程序,并且在其中一个页面上 $(document).com('click'... 事件间歇性地触发。我在结帐队列中有一个项目列表,以及删除每个项目的选项。如果我从列表的顶部到底部,点击事件大多会触发(但不总是)。如果我从底部开始,有时它们会触发,有时不会。有些需要点击 2 次,有些需要 6 次以上的点击才能注册。

进入代码。这是 django 从模板生成的 html:

<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>

这是我的 jQuery:

$(document).on('click','.DeleteItem',function(event){
event.preventDefault();
var thisID = $(this).attr("id");
var data = { Action: "delete", itemid: thisID};

var pr = "#product-"+thisID;
$(pr).fadeOut(500, function() { $(pr).remove(); });

$.ajax({
url: "/cart/",
type: "POST",
data: data,
beforeSend: function (xhr, settings) {
xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
},

// handle a successful response
success: function (json) {
if (json.result == "OK") {
console.log(json);
console.log("success");
} else {
console.log(json);
console.log("failure");
}
},

// handle a non-successful response
error: function (xhr, errmsg, err) {
console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
}
});
});

最佳答案

好吧,以防万一其他人遇到这种情况,我最终弄清楚了这里发生了什么。

我在模板中定义按钮的方式是罪魁祸首:

<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 "class 是一个小垃圾桶图标,只占按钮区域的 1/3 左右。

如果您单击按钮中间的 smack bang(直接在垃圾桶上),将会发生什么情况,一切都会正常进行。但是,如果您单击按钮的其他位置,则什么也没有发生。 IE。有时有效,有时无效。

修复是将“DeleteItem”类定义移动到按钮:

<button class="btn btn-danger btn-sm DeleteItem" id="3653672818"><i class="fa fa-trash-o" ></i></button>

关于javascript - jQuery 间歇性 .on ('click' ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33533818/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com