1

Weird problem, and apparently not uncommon with jquery mobile. I have a two-item listview popup that is intended to allow users to switch views via <a href="someurl.com">. Each choice is intended to display json data on the same page. I don't want the href to take the viewer to another page, so I am trying to use event.preventdefault().

But after much research I still cannot prevent an href from jumping to google.com, even though (I think) I am using event.preventdefault(); properly.

here's the relevant html:

<div data-role='popup' id='popupSwitchView' data-theme='none'>
    <ul data-role='listview'>
        <legend>Choose a view</legend>
        <li><a href='javascript:;' data-role='button' data-transition='fade' data-mini='true' class='ui-btn-active switchview' id='ABC' name='theView' value='ABC'>ABC</a>
        </li>
        <li><a href='http://google.com' data-role='button' data-transition='fade' data-mini='true' class='switchview' id='DEF' name='theView' value='DEF'>DEF</a>
        </li>
    </ul>
</div>

... and here's the jquery:

$('#DEF').on('click', function () {
    event.preventDefault();

I wondered if it's the way I'm using the selector, but I tested the selector with the same code here and it seems my selector is fine.

Chrome console isn't showing any error. Any thoughts on what I'm missing here?

EDIT

I neglected to mention that the above html and jquery are part of a php variable $html_jq, which is echoed from another php file.

i.e., file1.php echoes $html_jq, which is defined in file2.php.

prokaryote
  • 437
  • 6
  • 16
  • you need to put -- event -- inside the brackets so it gets picked up -- $('#DEF').on('click', function (event) { -- also try -- event.stopImmediatePropagation() -- it Keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree. – Tasos Oct 17 '15 at 18:50
  • @Tasos thanks, yes, tried that -- also tried $('#DEF').on('click', function (e) { e.event.preventDefault();... neither worked. Nor did event.stopImmediatePropagation() unfortunately. – prokaryote Oct 17 '15 at 19:06
  • yeah they dont always work. What you can do is set up a flag eg onclick you set a variable to on state. Then set a timeout to a second or so to clear the on state to off. Now in your other click functions you check -- if state is on then dont run the code. This is kind of a work around and work very well – Tasos Oct 17 '15 at 19:23
  • thanks again. my edit might shed some light on this (i.e. the html and jq are in a php variable that is being echoed) . I didn't think it was relevant yesterday but am starting to suspect it is – prokaryote Oct 18 '15 at 17:25
  • I always use like this: `$('#DEF').on('click', function(event){ event = event || window.event; event.preventDefault(); });` – ghaschel Oct 23 '15 at 17:40

2 Answers2

0

I have I think part (maybe 0.01 percent) of the answer. The selector isn't grabbing anything, which explains the uncooperative behaviour. I think it means jquery mobile and jquery itself are handling this event behind the scenes and they're referring to something else and obviously not my selector.

As was suggested in this stack question, I drilled into what actually happens when you click on that link, and it's pretty weird.

i.e., with "click" checked in Chrome Developer Tools Source tab -> Event Listener Breakpoints -> Mouse -> Click and then hitting f11 until it stops jumping around, I discovered what appears to be an inescapable While loop in which the event gets hung up. That While loop appears to be in jquery-2.1.1.js on line 4541.

This is interesting under-the-hood stuff which will prove very valuable at some point, but I am unsure what to do here. Any suggestions?

Community
  • 1
  • 1
prokaryote
  • 437
  • 6
  • 16
0

As of this date, this problem happens when you try and use JQM 1.4.5 with anything after Jquery 2.1.4

See Jquery mobile github

pat capozzi
  • 1,412
  • 1
  • 20
  • 16