0

I've been working on a number of ways to do this and I'm now convinced there is some thing I am missing as my code works fine on JSfiddle - http://jsfiddle.net/ccsnet/dK7NX/5/

<div id="eventscontent" data-role="content">

            <div id="eventlistcontrolsdiv1" align="center" >
              <form id="eventlistcontrols" name="eventlistcontrols" class="eventlistcontrols" method="post" action="">
                  <div id="eventlistbutton" align="center">
                      <div data-role="fieldcontain">
                          <fieldset data-role="controlgroup" data-type="horizontal" >
                          <input id="bydistance" type="radio" name="eventsortby" checked="true" />
                          <label for="bydistance">By Distance</label>
                          <input id="bytype" type="radio" name="eventsortby" />
                          <label for="bytype">By Type</label>
                          <input id="byimpact" type="radio" name="eventsortby" />
                          <label for="byimpact">By Impact</label>
                          </fieldset>
                      </div>
                  </div>
              </form>
            </div>
        </div>​


$(document).ready(function() {
    $(function() {
        $("input[name='eventsortby']").click(function() {
            alert($("input[name=eventsortby]:radio:checked").attr("id"));
        })

    });
});

What I don't understand is why this should be the case. The only differences are that I have the javascript in a separate file to the html form but I thought I was referencing it correctly. I have tried doing...

input[name=document.eventlistcontrols.eventsortby]

... how ever this did not work either....

Can any one see what I am not doing correctly ?

Thanks

Terran

Jonas
  • 121,568
  • 97
  • 310
  • 388
Terran Brown
  • 509
  • 10
  • 25
  • 1
    Try by placing your code on pageload event of jquery-mobile page instead of jquery ready. – Nachiket Jul 01 '12 at 15:36
  • You certainly don't need two document.ready event handlers. Try using a page event like pageinit. – Jasper Jul 01 '12 at 15:47
  • Thanks both - I've just tried this ( http://stackoverflow.com/questions/8782359/how-to-use-pageinit-correctly ) with no luck. Re the second function its to watch for a change on the radio button set and my plan is to grab the ID of that button and assign it to a var... `$( "#events" ).live( 'pageinit', function(){ $("input[name='eventsortby']").click(function() { alert("Here"); alert($("input[name=eventsortby]:radio:checked").attr("id")); }) });` – Terran Brown Jul 01 '12 at 16:36
  • can u make a fiddle with jquery mobile (Same version you are using) ? You can fork and modify this one.. http://jsfiddle.net/nachiket/3BJ5C/ – Nachiket Jul 01 '12 at 17:45
  • I can ... how ever I've just fixed it and I'm more confused than ever.... I had the above about mid way in my code as I had located it with some other form functions which already work, I've now moved the exact code towards the very top and I'm working.... I can only assume some thing was stopping the code coming down that low.... although as I understand jquery it should be a case of async execution.... T – Terran Brown Jul 01 '12 at 18:03

0 Answers0