javascript - 使用角色按钮从 span 触发 javascript 函数时面临问题

Question

我正在使用输入类型文本和跨度构建表，并在 . 我想当用户单击带有 Angular 色按钮的跨度时触发 javascript 函数。 这是我的跨度

         <th>
            <span data-field=@COLUMN_NAME class="k-filtercell" data-role="filtercell">
                  <span>
                       <input id="COLUMN_NAME" data-bind="value: value" style="width:120px" aria-label="Name" title="Name" data-text-field=@COLUMN_NAME role="textbox"  aria-readonly="false" aria-autocomplete="list" >
                     <span unselectable="on" class="k-icon k-clear-value k-i-close k-hidden" title="clear" role="button" onclick="filterInputBtn();" tabindex="-1"></span>
                   </span>
            </span>
       </th>

我正在触发 javascript 函数

            $(document).ready(function () {

            filterInputBtn = function () {
             var inputHTML = $(this).closest('input').val();
           }
        });

但是点击事件没有被触发。 请让我知道如何使用 Angular 色按钮从跨度触发点击事件

Answer 1

由于您使用的是 jQuery，正确的方法是在 span 上使用 .on() 监听器:

$(document).ready(function() {
  $("span[role=button]").on("click", function() {
    var inputHTML = $(this).prev('input').val();
    console.log(inputHTML)
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <th>
    <span data-field=@COLUMN_NAME class="k-filtercell" data-role="filtercell">
                  <span>
                       <input id="COLUMN_NAME" data-bind="value: value" style="width:120px" aria-label="Name" title="Name" data-text-field=@COLUMN_NAME role="textbox"  aria-readonly="false" aria-autocomplete="list" type="text">
                     <span unselectable="on" class="k-icon k-clear-value k-i-close k-hidden" title="clear" role="button" tabindex="-1">Span Content</span>
    </span>
    </span>
  </th>
</table>