Question

我有一个由ng-repeat生成的按钮和输入列表，我想要以下功能：当我点击一个按钮时，它会聚焦于以下输入。

如果我使用：

MouseOverRow

它工作正常。但如果我想对那些脚本使用ng-repeat：

    <div>
        <button class="btn btn-sm chat-option chat-option-add but-0" style="padding: 0px;border-radius: 50%;"></button>
        <input type="text" class="input-0" style="color:black;">
    </div>

    <div>
        <button class="btn btn-sm chat-option chat-option-add but-1" style="padding: 0px;border-radius: 50%;"></button>
        <input type="text" class="input-1" style="color:black;">
    </div>`enter code here`
 <script>
    $('.but-0').click(function () {
        $('.input-0').focus();
    });
    </script>

    <script>
    $('.but-1').click(function () {
        $('.input-1').focus();
    });
    </script>

它对我不起作用 - 点击按钮根本不会对输入进行聚焦。

感谢

Answer 1

您必须将事件绑定到现有元素。

<button class="btn btn-sm chat-option chat-option-add but-{{$index}}" style="padding: 0px;border-radius: 50%;">button</button>
<input type="text" class="input-{{$index}}" style="color:black;" />

$(document).on('click', '.but-0', function () {
    $('.input-0').focus();
});

$(document).on('click', '.but-1', function () {
    $('.input-1').focus();
});

在棱角分明，您可以通过按钮上的ng-click帮助更优雅地完成任务。

<button class="btn btn-sm chat-option chat-option-add" ng-click="buttonClicked($index)" style="padding: 0px;border-radius: 50%;">button</button>
<input type="text" class="input-{{$index}}" style="color:black;" />

$scope.buttonClicked = function($index) {
    $('.input-'+ $index).focus();
}

请参阅此DEMO

ng-repeat和focus输入

1 个答案: