jQuery：雙擊表格設置文本

我有幾個表加載ajax的內容。有時我必須手動更改td的內容才能將其導出爲PDF，因此我認爲最好的方法是使用jQuery的.dblclick()雙擊創建每個td的觸發器。觸發器將打開一個input字段的模態，並在提交模態時更改雙擊td的文本。jQuery：雙擊表格設置文本

這是有效的，但是當我更改第二個，第三個等的內容td時，每個先前點擊的td也會獲得新值。

檢查我的小提琴：https://jsfiddle.net/fvoufq07/

我迄今爲止代碼：

$(".sitename").dblclick(function() { 
    var sitename = $(this); 
    $("#msgBox .modal-title").html("Change sitename"); 
    $("#msgBox .modal-body").html("Enter new sitename:<input type=\"text\" id=\"new_sitename\">"); 
    $("#msgBox").modal("show"); 
    $("#msgBox button.btn").click(function() { 
    sitename.text($("#new_sitename").val().trim()); 
}); 

});

來源

2015-10-16 DaFunkyAlex

這是因爲你重複使用同一按鈕的模式。因此，每次打開模式時，都會在按鈕上添加一個新的偵聽器，但不會殺死前一個。

你可以殺死一個以前聽者off：

$(".sitename").dblclick(function() { 
    var sitename = $(this); 

    $("#msgBox .modal-title").html("Change sitename"); 
    $("#msgBox .modal-body").html("Enter new sitename:<input type=\"text\" id=\"new_sitename\">"); 
    $("#msgBox").modal("show"); 
    $("#msgBox button.btn").off('click').click(function() { 
     sitename.text($("#new_sitename").val().trim()); 
    }); 

});

來源

2015-10-16 09:23:57 Magus

這很簡單但很棒，thx！ – DaFunkyAlex

試試這個

$(".sitename").dblclick(function() { 
sitename = $(this); 
$("#msgBox .modal-title").html("Change sitename"); 
$("#msgBox .modal-body").html("Enter new sitename:<input type=\"text\" id=\"new_sitename\">"); 
$("#msgBox").modal("show"); 
$("#msgBox button.btn").click(function() { 
    sitename.text($("#new_sitename").val().trim()); 
});

}）;

Krupesh科特查打我太它;）

來源

2015-10-16 09:31:29

試試這個

var sitename; 
$(".sitename").dblclick(function() { 
    sitename = $(this); 
    $("#msgBox .modal-title").html("Change sitename "); 
    $("#msgBox .modal-body").html("Enter new sitename:<input type=\"text\" id=\"new_sitename\">"); 
    $("#msgBox").modal("show"); 
}); 

$("#msgBox button.btn").click(function() { 
     $(sitename).text($("#new_sitename").val().trim()); 
    });

這裏更新jsfiddle

來源

2015-10-16 09:33:08

你看到的問題是，點擊功能添加到按鈕

$("#msgBox button.btn").click(function() { 
    sitename.text($("#new_sitename").val().trim()); 
});

未被刪除。因此，每當您重新打開模型時，都會更改之前點擊過的任何文字以及新點擊的文字。

爲了避免這種情況，你應該刪除單擊事件，或者更好的使用jQuery的.one()功能，將僅在一個觸發事件的第一個實例的回調：

$("#msgBox button.btn").one('click', function() { 
    sitename.text($("#new_sitename").val().trim()); 
});

更新小提琴：https://jsfiddle.net/fvoufq07/6/

更新：上述解決方案不趕開模，然後不點擊「關閉」按鈕保存關閉的問題。

有一對夫婦的方式來解決這個問題：要麼添加新.one()回調之前使用.off()，或再次使用.off()，但在有條件使用bootstap的hidden.bs.modal觸發模式結束。

$("#msgBox").one('hidden.bs.modal', function() { 
    $("#msgBox button.btn").off('click'); 
});

您也可能希望將'click'監聽器分配給一個變量，這樣就可以明確刪除監聽器，如果你有相同的元素其他'click'聽衆，這將是有益的。

var updateText = $("#msgBox button.btn").one('click', function() { 
    ... 
}); 
$("#msgBox").one('hidden.bs.modal', function() { 
    $("#msgBox button.btn").off('click', updateText); 
});

更新的小提琴在https://jsfiddle.net/fvoufq07/7/有一個例子。

來源

2015-10-16 09:35:16

jQuery：雙擊表格設置文本

回答

相關問題