This problem has been pussling me for the last few days, can't really get my head around it so I'm hoping that maybe someone here has some light to shed upon this problem.

I've got a form and would like to give the user control to collapse and expand different fieldsets within the form by clicking the headers for each fieldset.

I am using jQuery and my problem is that the "click" event is not firing. I've tried several other events as well but nothing works. I've checked that the objects exists, which they do, but theyre still not clickable.

The form (html) looks something like this:

<form id="questionnaire" method="post" action="#">
  <fieldset>
    <h3>Field 1</h3>
    <ul>
      <li id="question_1">
        <p>the question</p>
        <ul class="alternatives">
          <li class="alternative"><input /><p>alternative 1</p></li>
          <li class="alternative"><input /><p>alternative 2</p></li>
          <li class="alternative"><input /><p>alternative 3</p></li>
        </ul>
      </li>
      <li id="question_2">
        <p>the question</p>
        <ul class="alternatives">
          <li class="alternative"><input /><p>alternative 1</p></li>
          etc...
        </ul>
      </li>
    </ul>
  </fieldset>
  <fieldset>
    <h3>Field 2</h3>
    <ul>
      <li id="question_3">
        <p>the question</p>
        <ul class="alternatives">
          ...
        </ul>
      </li>
      <li id="question_4">
        <p>the question</p>
        <ul class="alternatives">
          ...
        </ul>
      </li>
    </ul>
  </fieldset>
  <input type="submit" />
</form>

And the javascript looks like this:

$('#questionnaire > fieldset > ul').hide();
$('#questionnaire > fieldset:first > ul').show();

// The above code works like a charm!
// The code below doesn't

$('#questionnaire > fieldset').click(function() {
//do stuff
});

The js-file is included right before the end-body tag so a $(document).ready should not be needed, but I have still tried that though without any results.

So the question is: what am I missing here?

3 answers

1
point

What happens if you remove the >. I don't think you need it in this case since you want all the fieldsets within the form.

Answered about 10 years ago by Darryl Hein
  • Thanks for the answer and you are absolutely right, the ">" is not needed. The first draft of the questionnaire was built using only unordered lists, so I had to be more explicit then when choosing the objects. I've changed the code now, still doesn't fire any events though. Jim Kaneko about 10 years ago
danwellman 5600
1
point

Instead of attaching the click handler to the fieldset, have you tried adding it to an anchor nested within each <h2>? Attaching the handler to a link makes much more sense because links natively fire click events anyway. Set the HTML like this:

<form id="questionnaire" method="post" action="#">
  <fieldset>
    <h3><a href="#" title="Click to open this section">Field 1</a></h3>
    etc...

And use the following Javascript:

$('#questionnaire h3 a).click(function() {
//do stuff
});
Answered about 10 years ago by danwellman
  • You wouldn't even need to attach it to an anchor element, you can just attach it to the H3 or legend element and just add .css("cursor", "pointer") to make it look like a clickable link. Nathan DeGruchy about 10 years ago
  • Thanks for the input. I really want to stay away from anchors though since they will probably be confusing for users who don't have javascript turned on (they won't perform any task then). I did however try to add anchors just to see if they where a solution to my predicament but unfortunatly they didn't do it either. I tried it with both "return false" and e.preventDefault(), but nothing. And Nathan, good idea to add cursor style to the elements via javascript, I had it staticly defined in the stylesheet but I will change it. I think I will use the toggleClass() function though in an effort to keep the javascript style free. Jim Kaneko about 10 years ago
  • @nathan sure, that would work just as well :) danwellman about 10 years ago
0
points

Problem solved, it was my mistake.

As you might have figured out there are more to the site than the code I attached to the question. And as it turned out the problem I had was because of another javascript function.

Because I am lazy I actually added an image on the site via javascript, it was meant to be a placeholder function until I actually inserted it for real in html. Anyway I did the function and forgot about it, as is praxis when you do something less than good.

The function worked like this:

function insertImage() {
    var image = '<img src="../images/graphic/theImage.png" alt="" id="top" />';
    var currCont = $("#content").html();
    var newCont =  image + currCont;
    $("#content").html(newCont);    

}

As you can see I took the contents of the page (everything within the #content-div) and concatenated it with the image and placed it back on the page. Then I called the function at the end of the script. Which obviously meant that the objects did exist in the beggining and they where also, probably, correctly bound to the event, but was in the end removed and replaced with similar objects that didn't have any events attached to them.

So, my mistake, sorry to have bothered you. I did however get some useful inputs from the answers above, so it wasn't all a waste of time... For me that is.

Answered about 10 years ago by Jim Kaneko