Vfrdtyky

I have a form which contains input radio elements (2nd level under the header) into headers (to generate a selection) - this have been tested and functions normally.

To manage headers I have a query event click which performs (verified) actions when the header is not in the described case. So if we are not into the cases the .click event simple returns true to go on just after the test (a simple if).

The problem is that the input is not performed (the radio button which is into the header is never checked).

Note : If the actions are performed (no test done) the actions are performed and a second click is needed from user to get the radio button to be checked. This is the lonely case that I could check the radio button.

The js code is (summarized) :

$(".H_title")

        .focusin(function(event) {

            if ( ... )  { do stuff }

            return true; // go on action

          } )

        .focusout(function() {...do_stuff);} );

//END

What can be the reason ?

Note : I cannot change quite anything into the html structure on which I operate because it is generated by several codes (php and other js). I must be able to check the radio buttons into the page without changing the structure and contents.

Best regards

Trebly

Thanks to charlietfi for help in this question.

I understand that my explanations were not sufficiently precise to understand the case. More I had introduced an error when copying code.

There is a true problem of which I have found a solution which reaches the target but I am not sure of both the explanation of why it was not functioning and why it functions now.

There where two steps of development :

1- Just execute stuff when a span into a header is clicked (and but not involved another stuff on focusin the element while shiftkey is pressed).
The HTML structure contains :

<h5>

   <span class="toc-target" tabindex="1000"> <!-- puts the "target" on top -->

      <span class="H_title">

           Adhérent

      </span>

   </span>

   <span class="endof_tocid"></span>

</h5>

The reason of the first two levels of SPAN is that it is done by two different pieces of soft and need two different classes.

The associated code which was functioning (since three years) was :

$(".H_title")

        .click(function(event) {

            if ( ... )  { do stuff1 }

            return true; // go on action

          } )

        .focusin(function() {...do_stuff2a);} );

        .focusout(function() {...do_stuff2b);} );

//END

2- I need to had in some cases a radio button and do no perform stuff1 in such case (just add an input into the header) then the HTML code became :

<h5>

   <span class="toc-target" tabindex="1000"> <!-- puts the "target" on top -->

      <span class="H_title">

         <input name="user_type" type="radio" value="adh">

           Adhérent

      </span>

   </span>

   <span class="endof_tocid"></span>

</h5>

and I wrote the js code which do not functions:

$(".H_title")

        .click(function(event) {

            if ( ... )  { do stuff1 }

            return true; // go on action of the click on the button

          } )

        .focusin(function() {...do_stuff2a);} );

        .focusout(function() {...do_stuff2b);} );

//END

In my opinion the error seems that the radio button become not reachable into the H_title span while it is without code to manage the event. Note : this is the same for focusin actions and events.

If there is no Jquery code written for the click event everything is running normally.

//BEGIN    

$(".toc-target > input")

      .click( function(){ return true; }); 

      .focusin(function() {return true; } );

      .focusout(function() {return true; } );

$(".H_title")

        .click(function(event) {

            if ( ... )  { do stuff1: move-top }

            return true; // go on actions

          } )

        .focusin(function() {...do_stuff2a);} );

        .focusout(function() {...do_stuff2b);} );

//END

With this code the click on the input functions, what is the behavior :
1- the $(".toc-target > input") events are raised and return true which seems to do nothing lead to the normal selection of the radio button and event bubbles.
2- the H_titles gets his click event and it is executed it normally.

For now the focusin-focusout doesn't still function combined with the buttons I think that the problem comes from a conflict with the click (the fact that the header gets focus when clicked).
I have to clarify some ones about full ergonomics points and about compatibility (available on PC and Mobiles).

Another solution could be it seems "propagation" from H_title to the "input" but I have not found a good way to do everything needed into stuffxx and separate clearly the actions.

May be I am wrong or may be you have some suggestions to do it in a best way.

Best regards

Trebly