Facing issue in triggering javascript function from span with role button

Question

I am constructing table with input type text and span with role button inside the . I want to trigger javascript function when user clicked on span with role button. Here is my span

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

I am triggering javascript function

            $(document).ready(function () {

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

But the click event is not getting triggered. Please let me know how to trigger click event from span with role button

This has nothing to do with the element or its role. Just use jQuery's [built in methods for attaching events](https://learn.jquery.com/events/). — Heretic Monkey, Apr 17 '20 at 16:21
Does this answer your question? [jQuery.click() vs onClick](https://stackoverflow.com/questions/12627443/jquery-click-vs-onclick) — Heretic Monkey, Apr 17 '20 at 16:29

score 2 · Accepted Answer · answered Apr 17 '20 at 16:22

Since you're using jQuery, the correct way would be to use a .on() listener on the span:

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

codeHysteria127 · Answer 2 · 2020-04-17T16:20:40.587

0

You are not attaching on click event anywhere in your code

    $(document).ready(function () {

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

In javascript you have to first use keyword "function" and then write the name of the function

Hope this will help

edited Apr 17 '20 at 16:20

answered Apr 17 '20 at 16:17

codeHysteria127

77
10

From the OP, in the HTML: `onclick="filterInputBtn();"` – Heretic Monkey Apr 17 '20 at 16:20
yeah but he has written his function definition bad as I explained above in the code snippet – codeHysteria127 Apr 17 '20 at 16:21
...which you added after my comment, but that's okay :) – Heretic Monkey Apr 17 '20 at 16:22
well i didn't seen that you're posting comment :) but that's okay – codeHysteria127 Apr 17 '20 at 16:23

Facing issue in triggering javascript function from span with role button

2 Answers2