Keyup event for datatables search input not firing when using ajax

Question

I am loading a page that contains a jquery datatable via AJAX. My goal is when the user starts typing in filter(the default one supplied through datatables), grab the input and apply custom filtering. The custom logic will be applied when the keyup event fires. Since I'm using AJAX, I can't use my javascript directly as used in the api as all the content wouldn't have been loaded. However, with the help of this post, I was able to get certain events to fire (click, focus) to work correctly. Now, I can't seem to get it to fire for the keyup event. I have the following:

Updated

HTML

This works:

// Event fires correctly
$(document).on("focus", 'input[type="search"]', function () {
    alert('focus');
});

This doesn't work:

// Event never fires
$(document).on("keyup", 'input[type="search"]', function () {
    alert('keyup');
});

What is the proper way to call the on keyup event for datatables search bar when using ajax?

san · Accepted Answer · 2017-03-03 03:16:25Z

Are you sure your selector matches the correct input element?

Update

Can you trying binding the keyup event handler like the following?

$("input[type='search']").on("keyup", function () {
    alert('keyup');
});

If there is another keyup event handler attached to text box which stops propagation of the event, then the event handlers registered using $(document).on("keyup", "input[type='search']", ... ) are not triggered. However, other event handlers that are registered using $("input[type='search']").on("keyup", ...) are triggered.

Here's a code snipped that demonstrates this behavior:

$(document).ready(function() {

    var first_count = second_count = third_count = 0;
    $("input[type=text]").on("keyup", function (event) {event.stopPropagation(); first_count = first_count + 1; $("#first-handler").html(first_count)})
    
    $(document).on("keyup", "input[type=text]", function () {second_count = second_count + 1; $("#second-handler").html(second_count)})
    
    $("input[type=text]").on("keyup", function () {third_count = third_count + 1; $("#third-handler").html(third_count)})    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
          First event handler invocations: <span id="first-handler">0</span> <br/>
          
          Second event handler invocations: <span id="second-handler">0</span> <br/>
          
          Third event handler invocations: <span id="third-handler">0</span> <br/>
          
          <input type="text" placeholder="Type here" />
</div>

There are three event handlers attached to the input text. The First and Third event handlers are registered using $("input[type=text]").on and the Second event handler is registered using $(document).on. The First event handler stops the propagation of the event, because of which the second event handler is never triggered. However, the third event handler which is directly registered on the element is triggered irrespective of whether the event propagation stops or not.

It does, as I was able to get the focus event to work. Its just keyup that doesn't.

alireza · Accepted Answer · 2017-03-02 23:36:55Z

1

Try using $('input[type="search"]').keyup(function(){/* do something */ });.

I hope it solves

Update

var target = document.body;
var observer = new MutationObserver(function() {
    $('input[type="search"]').keyup(function(){console.log("dddd") });  
});

// configuration of the observer:
var config = { childList: true, subtree: true};

// pass in the target node, as well as the observer options
observer.observe(target, config);

Please choose the most proper target to observe.

Bind after appending input element to the HTML DOM.

edited Mar 2, 2017 at 23:36

answered Mar 2, 2017 at 22:25

alireza

5566 silver badges17 bronze badges

2 Comments

usr4896260 Over a year ago

That's what I originally tried. It doesn't work because I'm using ajax to load the content. Which is why my parent container uses $(document).on and therefore can correctly locate the element..

alireza Over a year ago

@usr4896260 I see the issue. You are defining on keyup action before appending the input. I updated my answer. I hope it helps.

e_i_pi · Accepted Answer · 2017-03-02 22:37:25Z

1

I'm guessing your HTML is wrong, or something else in code you haven't posted. This, for example, works fine:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
    <input type="search">
</body>
</html>
<script>
    $("input[type='search']").on("keyup", function () {
        alert('keyup');
    });
</script>

answered Mar 2, 2017 at 22:37

e_i_pi

4,8605 gold badges32 silver badges47 bronze badges

Collectives™ on Stack Overflow

Keyup event for datatables search input not firing when using ajax

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related