如何在嵌套的ASP.NET listview中使用jQuery检测当前元素

时间:2013-02-12 18:44:14

标签: asp.net listview jquery-selectors

我有一个嵌套的listview包含多行,每行包含一个ddl和一个文本框,E.G。:

<ItemTemplate>
    <tr>
        <td>
            <asp:DropDownList id="myDDL" runat="server" CssClass="aDDL"
                onfocus="javaScript:$(function() { 
                $(<selector>).siblings.RemoveClass('wrappedElement');
                $(<selector>).addClass('wrappedElement');
             })" /></td>
        <td><asp:TextBox id="myTextBox" runat="server" CssClass="aTextBox"
                onfocus="javaScript:$(function() { 
                $(<selector>).siblings.RemoveClass('wrappedElement');
                $(<selector>).addClass('wrappedElement');
             })" /></td>
    </tr>
</ItemTemplate>

我想要做的是包装点击的元素。发生的事情是我正在包装所有“aDDL”或“aTextBox”元素。我需要为刚刚关注的元素找到 选择器

我尝试this article,但是“this”或$(this)最终指向整个文档。

3 个答案:

答案 0 :(得分:1)

一些项目:

您不需要为代码添加前缀javascript:,这只是链接元素所需要的,而是调用href属性<a href="javascript:...">上的函数。 (在这种情况下可能更好地绑定到click事件。)

您也不需要使用jQuery对象包装内联函数。不要编码:onfocus="javaScript:$(function() { })",请尝试onfocus="function()"

最后,您可以将event对象作为处理程序调用的一部分传递,以获得对选择器的访问权限。不确定它是否可以内嵌:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script>
        function select(e) {
            var selector = e.target; // "select#options"
            var $selector = $(e.target) // jQuery object wrapping <select>
        }
    </script>
</head>
<body>
    <select id="options" onfocus="select(event)">
        <option value="1">Dog</option>
        <option value="2">Cat</option>
        <option value="3">Horse</option>
    </select>
</body>
</html>

答案 1 :(得分:0)

我会尝试在模板之外的一个地方定义你的javascript。这样的事情(来自记忆):

$(".aDDL").focus(function() {
     $(".wrappedElement").RemoveClass('wrappedElement');
     $(this).addClass('wrappedElement');
 });

// etc.

根据我的经验,最好通过选择器从元素外部分配函数,而不是将它们设置为HTML标记的一部分。

答案 2 :(得分:0)

在Javascript中

$(function() { 
    $(".aDDL,.aTextBox").focus(function() {
        $(".aDDL,.aTextBox").RemoveClass('wrappedElement');
        $(this).addClass('wrappedElement');
    });
});

并将其用作项目模板

<ItemTemplate>
    <tr>
        <td>
            <asp:DropDownList id="myDDL" runat="server" CssClass="aDDL" /></td>
        <td>
            <asp:TextBox id="myTextBox" runat="server" CssClass="aTextBox" /></td>
    </tr>
</ItemTemplate>

如果您仍希望内嵌,请尝试以下操作。

onfocus="$(function() { 
            var $this = $(document.activeElement);
            $this.siblings.RemoveClass('wrappedElement');
            $this.addClass('wrappedElement');
         })"