javascript - jQuery 日期选择器和类分配

Question

我正在使用默认的 jquery 日期选择器，该选择器是通过分配 dp 来触发的。类到输入元素。 如果我在 html 中设置元素的类，但如果我分配 dp ，它就可以正常工作。 class with js ( document.getElementById(eleId).className = 'dp'; ) 当用户单击输入时不会触发日期选择器。 有什么想法吗？

Answer 1

这是因为当您将 datepicker 事件绑定(bind)到元素时(通过选择器，可能是 $(".dp")，它仅绑定(bind)到那些在那之后的任何时间，就像你说的，元素都可能获得该类(甚至失去它)。我的建议是做这样的事情:

<div id="container">
    <!-- Your elements that may or may not have the class "dp" -->
</div>

<script type="text/javascript">
    $("#container").on("click", "dp", function () {
        $(this).datepicker('destroy').datepicker({showOn: 'both'}).focus();
    });
</script>

当然，您可以将绑定(bind)放入 document.ready 中，并且可以更改传递给 datepicker 的选项。如果您无法缩小范围，您可以使用 "body" 或其他内容来代替 "#container"。此外，您还需要以某种方式考虑 onfocus。

不过，我建议尽可能使用 jQuery，因为您已经包含了它。例如，您的代码:document.getElementById(eleId).className = 'dp';很好，但为什么不使用方法addClass，为什么不使用“#”选择器？喜欢:

$("#" + eleId).addClass("dp");
// and alternatively
$("#" + eleId).removeClass("dp");

使用className的一个问题是操作元素的类并不容易。使用 .className = "whatever" 会覆盖任何先前的 className 值 - 当然，您可以考虑这一点，但使用 jQuery 更容易。另外，当使用 removeClass 时，jQuery 可能会也可能不会自动删除元素的任何事件绑定(bind)，而 className 不会执行任何类似操作。如果您要执行删除和添加类之类的操作，可能会变得困惑。