我有一个输入元素
<input type="submit" id="btn-submit-id"
class="btn btn-success btn-submit-employee employee-tag" value="Submit">
并使用指向其类名的 javascript onclick 调用 btn-submit-employee
-
$(".btn-submit-employee").on("click", function(e){ e.preventDefault(); alert('submit'); });
单击提交按钮时,我将其值更改为 value="Update"
,同时调用 addClass
和 removeClass
函数添加 btn-update-employee
作为其类名之一并删除 btn-submit-employee
类名。当我第二次点击按钮时,它应该调用函数
$(".btn-update-employee").on("click", function(e){ e.preventDefault(); alert('Update'); });
但它仍然调用指向类名 btn-submit-employee
的 javascript 函数,即使在我使用 removeClass
功能。这有什么问题?下面是我的完整代码。非常感谢。
HTML 元素:
<input type="submit" id="btn-submit-id"
class="btn btn-success btn-submit-employee employee-tag" value="Submit">
Javascript:
$(".btn-submit-employee").on("click", function(e){
e.preventDefault();
$("#btn-submit-id").val("Update");
$(".btn-submit-employee").addClass("btn-update-employee");
$(".btn-submit-employee").removeClass("btn-submit-employee");
alert('submit');
});
$(".btn-update-employee").on("click", function(e){
e.preventDefault();
alert('Update');
});
最佳答案
这样添加的事件处理程序只会在页面首次加载时附加。要按照您的预期工作,您需要将事件处理程序委托(delegate)给 DOM 中的更高元素 - 通常是 document
本身,但您也可以使用周围的元素(如“div”)
$(document).on("click",".btn-submit-employee", function(e){
e.preventDefault();
$("#btn-submit-id").val("Update");
$(".btn-submit-employee").addClass("btn-update-employee");
$(".btn-submit-employee").removeClass("btn-submit-employee");
alert('submit');
});
$(document).on("click", ".btn-update-employee",function(e){
e.preventDefault();
alert('Update');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="submit" id="btn-submit-id" class="btn btn-success btn-submit-employee employee-tag" value="Submit">
关于javascript - 使用 javascript onclick 调用时,未检测到使用 Jquery addClass 添加到元素的类名,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57849986/