Question

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”功能，只执行点击事件处理程序？

Answer 1

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

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

修改

由于您的元素是动态的，您需要使用$(document).on(...)，否则选择器$(...).click(..)将不会找到元素，因为在设置click事件绑定时它不会存在。< / p>
以下是动态创建元素的基本示例：

$(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>

Answer 2

需要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>

Answer 3

删除HTML中的点击事件。
在JS中仅使用class.click。
对于href，您打开单引号，但以双引号结束。

Schema::table('users', function (Blueprint $table) {
    $table->string('email')->nullable();
});

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

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

3 个答案: