I didn't look into it that deeply, but one issue I see is that when
you click on the school choices, you're using the same ID from that LI
to create a new LI in the schools selected with the same LI. You can
only have one unique ID per HTML document. One suggestion is to just
parse the LI's ID for the number and create a new ID for the schools
selected.
var choice_id = $(this).attr("id").split('_')[1];
// from 'choice_0' gives you '0'
On Mar 27, 4:58 am, seamusjr <seamu...@hotmail.com> wrote:
> Hello,
>
> I am having some difficulty using the click event between two
> functions. Either it bubbles like crazy or it only works for one
> function then stopPropagation kills it altogther for the other. Using
> jquery 1.3.2 for this and .live. Please if you have suggestions let
> me know.
>
> Working on a script where there are two unordered lists,
> #school_choices and #selected_schools. When the user clicks on a LI
> from the #school_choices an LI is appended with the same text and id
> to #selected_schools, the clicked LI from #school_choices is then
> set to display:none. The #selected_schools UL that starts out with no
> child nodes, once it get populated and user can click on it, the
> clicked #selected_schools LI gets removed and the #school_choices LI
> that corresponds to it (same LI id and text) is set back to display
> block.
>
> Regards,
> Seamus
>
> JS:
>
> $(function(){
> function addSchool(){
> var choice_id = $(this).attr('id');
> var choice_value = $(this).text();
>
> $("ul#schools_selected").append("<li id='"+choice_id
> +"'>"+choice_value+"</li>");
> $(this).addClass("schoolHide").removeClass("schoolShow");
> // event.stopPropagation();
> }
>
> function removeSchool(){
> var selected_id = $(this).attr('id');
> var selected_value = $(this).text();
>
> $("ul#school_choices li").attr("id", selected_id).removeClass
> ("schoolHide").addClass("schoolShow");
> $(this).addClass("schoolHide").removeClass("schoolShow");
> }
>
> $("ul#school_choices li").live("click", addSchool);
> $("ul#schools_selected li").live("click", removeSchool);
>
> });
>
> CSS:
>
> .schoolShow { display: block; }
> .schoolHide { display:none; }
>
> HTML:
> <ul id="schools_selected">
> </ul>
>
> <ul id="school_choices">
> <li id="choice_0">Choice a</li>
> <li id="choice_1">Choice b</li>
> <li id="choice_2">Choice c</li>
> </ul>
