JQuery 选择器在 ASP.NET 网络表单中的错误控件中激活

Posted 2023-05-09

【中文标题】JQuery 选择器在 ASP.NET 网络表单中的错误控件中激活

【英文标题】：JQuery selector activating in the wrong control in ASP.NET webforms

【发布时间】：2014-09-01 18:36:01

【问题描述】：

因此，在这个母版页站点中，我在母版页中包含以下内容，以便在其 id 中包含“日期”一词的所有文本框中启用数据选择器

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />

<script type="text/javascript">

    function pageLoad(sender, args) 
        $(document).ready(function () 


            $("[id*='Date']").datepicker(
                showOn: 'button',
                buttonImageOnly: true,
                buttonImage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif'
            );
            $("[id*='Date']").click(function () 
                $("[id*='Date']").datepicker('show');
            );
        );
    
</script>

这在只有一个这样的文本框的页面上很好用。但是在具有多个日期时间文本框（txtStartDate 和 txtCompletionDate）的页面上，如果您单击第一个，则第二个将获得焦点并随后接收从日历弹出窗口中选择的值。如果我单击文本框旁边的日历图标或选择第二个文本框，则不会发生此问题。如果我在选择器中明确声明文本框 ID 的全名，也不会发生此问题。

【问题讨论】：

你为什么在函数中使用$(document).ready(function () ？

也分享你的html代码

@Satpal 好问题，我最初这样做是为了让 jquery 代码也可以在回发上工作，但看起来我可以删除 $(document).ready 函数，这仍然可以正常工作，谢谢！

【参考方案1】：

你需要使用this，它指的是在事件处理程序中调用事件的元素。

使用

$("[id*='Date']").click(function () 
    $(this).datepicker('show');
);

而不是

$("[id*='Date']").click(function () 
    $("[id*='Date']").datepicker('show');
);

【讨论】：

快速正确的回复。有点傻，我怎么没想到，但谷歌也没有出人意料地提供帮助