jQuery Mobile text/search change event acts differently

Question

I have a jQuery mobile application with change events bound to certain text inputs. The text inputs with the type="search" in particular don't fire on the "change" event like the type"text" text inputs do. Here is a snippet to explain:

HTML

<div data-role="page" id="p1"> 
    <div  data-role="content">
        <a href="#p2" data-role="button">Go To Page 2</a>
    </div>
</div> 

<div data-role="page" id="p2">
    <div  data-role="content">
        <p>This is page2</p>
        <input type="text" id='mytextbox'></input>
        <input type="search" id='mysearchbox'></input>
    </div>
</div> 

JavaScript

$('#mytextbox').change(function() {
    alert('Hello World!');
});
$('#mysearchbox').change(function() {
    alert('Hello World!');
});

Both text inputs are identical other than their id and their type. The text box fires on the change event, the search box doesn't.

The thing I have found is that if the text inputs are located on page 1, everything works as you would expect. So this is a relationship between page changes and the type of text field.

Here is a fiddle: http://jsfiddle.net/nMR85/1644/

Answer 1

Replace this

<div data-role="page" id="p2">
    <div  data-role="content">
        <p>This is page2</p>
        <input type="text" id='mytextbox'></input>
        <input type="search" id='mysearchbox'></input>
    </div>
</div> 

with this

<div data-role="page" id="p2">
    <div  data-role="content">
        <p>This is page2</p>
        <input data-type="text" id='mytextbox'></input>
        <input data-type="search" id='mysearchbox'></input>
    </div>
</div> 

The difference is I need to specify a "data-type" not a "type".

Answer 2

I hope you want to get the change event when doing the searching. type='search' has some other events associated. In this case you have to check onSearch event. You can check more in this link - reference.