jQuery Forum

It looks like potentially keepNativeSelector could be used to avoid this, but this is deprecated functionality - so likely not a good option.

Should something other than enhanceWithin be called to enhance the page?  Or should there not be an option/class I should be able to have on my input to ensure it doesn't get degraded so I can keep the events?

(Sorry the the 1.3.2 documentation, but the authors refuse to acknowledge that an FAQ is still a useful thing... The same advice applies to 1.4.5.)

2. Realize that jQuery Mobile "enhances" your markup. In some cases, that means that it changes the content of the document, adding elements in some cases, and for some enhancements a new element might enclose your original element. If you use third-party widgets, then, order of construction is important. 

You should always check to see if a third-party widget you use was designed to be used with jQuery Mobile, or if there are special instructions for using it with JQM.

Somebody MIGHT wander by here who has done the same thing and can answer your question. But I think you will have better luck checking with whatever support resources are available for jquery.DataTables.

My guess is that you might need to change the order. Enhance your page FIRST, and THEN initialize the data table widget.

The author says he doesn't support jQuery Mobile, "doesn't have time".

If you do some more searches, maybe you will find a work-around.

Fundamentally the issue is being caused because the input is being given a type of 'search'.  jQuery mobile has a list of input types to degrade ($.mobile.degradeInputs).  Search is an input in this list to be degraded.  The JQM function degradeInputsWithin copies the HTML element, and replaces the type.  However the issue is in this JQM method the events are getting lost.

Set a breakpoint in the $.mobile.degradeInputsWithin function at the line:

element.replaceWith( html.replace( findstr, repstr ) );

Before this line executes check the events associated to the input ($._data(this).events).  You will get an object with event listeners for cut, input, keypress, keyup, paste and search.  Go ahead and step over this line and check the event listeners again - you don't.

I do expect JQM to change the look of the page, and manipulate the DOM tree (that's why I'm calling enhancePageWithin in the first place).  I was not expecting degradeInputsWithin to lose the event listeners for this object.  It is a simple fix within dataTables, if the search is defined with a type of 'text' instead the input wouldn't be degraded.  

However, I'm questioning whether the JQM functionality is correct.  Is degradeInputsWithin supposed to remove the previously defined event handlers for an input?  The documentation on the function is a bit ambiguous (https://api.jquerymobile.com/jQuery.mobile.degradeInputsWithin/).  It indicates it removes undesirable native behavior - presumably this means for example on a search field where chrome will also add an 'x'.  But is the intention to actually lose the event listeners, or was this merely an oversight i.e. bug?

That's why I suggested you enhance FIRST, and THEN initialize the datatables widget.

I'm not trying to remove an element using jQuery, I'm trying to enhance the page.  An adverse side-effect is it calls degradeInputsWithin which is  basically replacing the element.  My question is was this actually the intention of this JQM function, or was it an oversight?  The documentation is unclear.

I know. YOU aren't. jQuery Mobile IS.

  An adverse side-effect is it calls  degradeInputsWithin which is    basically replacing the element .

Which as a side-effect removes any event handlers.

Catch-22.

jQuery Mobile doesn't expect that you will have attached event handlers before enhancing the markup.

It's a "chicken and egg" problem. Or, "after you, Alphonse!"

For example are they specifically trying to remove event handlers to prevent something from happening?  If that's the case, then it should be documented.

If that's not the case, I would consider this a JQM bug.  JQM should add the logic to preserve/copy the events over to the object it's replacing.

You'd have to ask the developers. They have a weekly meeting on IRC, if you'd like to ask. Or you can file a bug report on GitHub.