Question

我正在使用jQuery在文本框上方显示一个计数器，显示用户输入了多少个字符以及剩下多少个字符。它通过更新文本框上方.text()的{{1}}来实现此目的。

所以在span我最初将span设置为文本框的maxlength，然后onkeyup更新它。

它运行得很好，但是当文本框在ajax控件库的ASP.NET ModalPopup中时，我发现如果ModalPopup关闭然后重新打开，$(document).ready似乎没有-fire所以剩余的初始字符数不会更新（尽管当你再次开始输入时，它会按预期工作）

（在我的示例中，ModalPopup中有一个DropDownList，其中AutoPostBack =“true”，并且在回发后，在弹出扩展器上调用$(document).ready方法使其保持可见状态。

当我遇到类似的事情时，我被指示在jQuery中使用.Show()事件，这是我为keyup处理程序所做的。是否有一些类似的方法来解决.live的初始设置问题？

ASP.NET标记：

span

和相关的jQuery：

<asp:Content ID="Content2" ContentPlaceHolderID="cMain" Runat="Server">
    <p> 
        Enter some text (<span id="countRemain"></span> characters remaining) <br />
        <asp:TextBox runat="server" id="txtCounterTest" MaxLength="100" CssClass="input mediumField CountMe" />
    </p>
</asp:Content>

Answer 1

我担心ajax执行后，“ready”事件不会再次触发。

将“显示”/“隐藏”事件添加到ModalPopupExtender

我从未使用过ajax控件工具包，所以我对它不是很熟悉。虽然我找到了 add_shown & add_hiding ModalPopupExtender Events article ，但它解释了在弹出窗口显示或隐藏时如何附加事件处理程序。

这就是我想要实现的目标：当显示模态时，重新计算“用户输入了多少字符以及剩下多少字符”。

Sys.Application.add_load(pageInit);   

function pageInit()  
{  
    var modalPopup = $find('ModalPopupExtender1');   
    modalPopup.add_shown(onModalShown);  
}  

function onModalShown(sender, args)  
{  
    // this will be executed when the modal is shown.
    // re-calculate here the character thing
}

我没有对它进行测试，但实际上它可能会给你一个领先优势。

进一步阅读：

活动委派

关于使用jquery委派“keyup”事件，你应该使用.delegate()（jQuery 1.4.3+）或.on()（jQuery 1.7+）而不是.live（）作为后者现在已经过时，可能会在以后的任何版本中从jquery库中删除。

委托机制完全不同且效率更高，语法也有所不同：

$("#someParentContainer").delegate('.CountMe', 'keyup', function(e) {

});

$("#someParentContainer").on('keyup', '.CountMe', function(e) {

});

简而言之，您将从具有类“.CountMe”的元素触发的事件“keyup”委托给父元素（例如您的“#Content”面板）。

Answer 2

Didier Ghys在接受的答案中引用的文章引领我走上了正确的道路。但是，无论我尝试了什么，我无法让$find()工作并实际找到ModalPopupExtender，它只是不断返回'null' is null or not an object

所以我所做的就是将以下<script>添加到每次触发的ASPX页面，包括显示ModalPopup时： -

<script language="javascript" type="text/javascript">
   function pageLoad() {
       onShow();
   }  
</script>

其中onShow()是我的jQuery文件中定义的方法，它将范围设置为适当的字符数。

感觉有点hacky，但它已经成功了。

当模态弹出窗口重新打开时，jQuery document.ready会激活吗？

2 个答案: