[英]Only first 'click' firing
我有一個頁面,允許用戶“輕推”某人做某事
我有以下html(它可能出現很多次,但現在我將顯示兩個)
<div class="nudgeHolder641">
<a id="nudge" data-wl_id="641" data-nudge_for="415" data-nudge_from="63" href="#">Nudge</a>
</div>
<div class="nudgeHolder1172">
<a id="nudge" data-wl_id="1172" data-nudge_for="415" data-nudge_from="63" href="#">Nudge</a>
</div>
我有以下代碼來操作點擊:
$(document).ready(function(){
$("#nudge").click(function() {
var nudge_from = $( '#nudge' ).data( 'nudge_from' );
var nudge_for = $( '#nudge' ).data( 'nudge_for' );
var wl_id = $( '#nudge' ).data( 'wl_id' );
var dataString = 'nudge_from='+ nudge_from + '&nudge_for=' + nudge_for + '&wl_id=' + wl_id;
$.ajax({
type: "POST",
url: "/pages/includes/ajax/nudge.php",
data: dataString,
success: function() {
$('.nudgeHolder'+wl_id).html("<h3>Fantastic!</h3>")
.append("<p>Nudge Sent!</p>")
.hide()
.fadeIn(1500, function() {
//$('#message').append("<img id='checkmark' src='/images/icons/check.png' />");
});
}
});
return false;
});
});
但是,只有第一個實例在單擊時會觸發,當我單擊第二個“微調”鏈接時,什么也沒有發生,第一個實例按預期工作。 如果頁面上僅顯示一個鏈接,則它工作正常。
有任何想法嗎?
您綁定到一個ID,並且一個ID在DOM中只能存在一次。 嘗試將其更改為類:
<div class="nudgeHolder641">
<a class="nudge" data-wl_id="641" data-nudge_for="415" data-nudge_from="63" href="#">Nudge</a>
</div>
<div class="nudgeHolder1172">
<a class="nudge" data-wl_id="1172" data-nudge_for="415" data-nudge_from="63" href="#">Nudge</a>
</div>
然后使用以下方式綁定:
$(function(){
$(".nudge").click(function() {
var nudge_from = $( this ).data( 'nudge_from' );
var nudge_for = $( this ).data( 'nudge_for' );
var wl_id = $( this ).data( 'wl_id' );
var dataString = 'nudge_from='+ nudge_from + '&nudge_for=' + nudge_for + '&wl_id=' + wl_id;
$.ajax({
type: "POST",
url: "/pages/includes/ajax/nudge.php",
data: dataString,
success: function() {
$('.nudgeHolder'+wl_id).html("<h3>Fantastic!</h3>")
.append("<p>Nudge Sent!</p>")
.hide()
.fadeIn(1500, function() {
//$('#message').append("<img id='checkmark' src='/images/icons/check.png' />");
});
}
});
return false;
});
});
與其使用唯一的div
類,不如將它們用作標簽上a
ID。 像這樣:
<div class="nudge">
<a id="nudgeHolder641" data-wl_id="641" data-nudge_for="415" data-nudge_from="63" href="#">Nudge</a>
</div>
<div class="nudge">
<a id="nudgeHolder1172" data-wl_id="1172" data-nudge_for="415" data-nudge_from="63" href="#">Nudge</a>
</div>
然后,在jQuery中; 你需要:
$(document).ready(function(){
$(".nudge a").click(function() {
沒注意到您到處都在使用$('#nudge')
。 正如ryadavilli所指出的; 將$('#nudge')
替換$('#nudge')
$(this)
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.