首页 文章

锚点链接需要两次点击才能触发事件

提问于
浏览 次
-1

HTML：

<asp:TextBox ID="dataTextBox" MaxLength="10" runat="server"></asp:TextBox>

<a class='new_message' onclick='focusMethod();' tabindex='-1' href='#dataTextBox"> New Message</a>";

Jquery函数：

function focusMethod() {
        $('[class=new_message]').click(function (e) {
            e.preventDefault();
            $($(this).attr('href')).focus();
        });
    }

当我单击锚链接时，焦点应转到输入文本框 . 但它需要2次点击才能执行 .

我的场景是：

  • onclick用于锚标记，以防止默认行为，即触发href .

  • 我正在构建一个可访问的表单，所以我需要带有值的href（所以我不能使用href =“＃”）

  • 如果我只使用没有该函数的click事件处理程序，则不会被触发（而是激活href并且焦点不会转到文本框）

它需要2次点击，因为首先触发函数focusMethod，然后附加事件处理程序 . 有没有办法避免执行“focusmethod”功能，只执行点击事件处理程序？

javascript jquery html

3 回答

  • 1

    因为您的方法 focusMethod 正在绑定一个新的单击事件，然后在您下次单击该元素时执行该事件 . 只需删除内联点击事件 onclick='focusMethod();' ，因为它不需要 . 然后你可以做一个函数而不是一个函数：

    $('[class=new_message]').click(function (e) {
    e.preventDefault();
    $($(this).attr('href')).focus();
});

    Edit:

    由于您的元素是动态的，因此您需要使用 $(document).on(...) ，否则在设置click事件绑定时存在选择器 $(...).click(..) isn 't going to find the element as it wouldn't .

    下面是动态创建元素的基本示例：

    $(document).on("click", "[class=new_message]", function (e) {
    e.preventDefault();
    console.log("clicked");
    $($(this).attr('href')).focus();
});

$("body").html("<a class='new_message' tabindex='-1' href='#dataTextBox'> New Message</a>");

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    回复于
  • 0

    • 删除HTML中的单击事件 .

    • 在JS中只使用class.click .

    • for href您打开单引号但以双引号结束 .

    $('[class=new_message]').click(function(e) {
  e.preventDefault();
  $($(this).attr('href')).focus();
});

    <a class='new_message' tabindex='-1' href='#dataTextBox'> New Message</a>
    回复于
  • 0

    需要2次点击，因为首先触发函数focusMethod，然后附加事件处理程序 .

    您需要单击才能运行包含jQuery .click 函数的函数 . 只需删除 focusMethod() 函数（和 onclick ）即可 .

    $('.new_message').click(function(e) {
  e.preventDefault();
  $($(this).attr('href')).focus();
});

    <asp:TextBox ID="dataTextBox" MaxLength="10" runat="server"></asp:TextBox>

<a class='new_message' tabindex='-1' href='#dataTextBox'>New Message</a>
    回复于

相关问题