Hi There,
first of all, sorry for taking so long time to answer the answer :-) I
had to change accounts...
Originally I had written:
> > for an introductory article regarding jQuery I have done the obvious
> > and shown how to do a slide show of pictures (nothing as fancy as
> > lightbox :-). The application consists of 1 HTML, 1 JavaScript and one
> > PHP file.
>
> > Provided, I include
>
> > <div id="liste">
> > <ul id="fuerbildernum"><span class="bildervorsatz">Bilder</span>
>
> This markup is not good. You shouldn't have anything directly inside
> UL except LI. Doing this may cause unexpected results.
True. I changed it, but as you'll see below that wasn't the problem...
>
> > <li><a title="Bild 1 von 9 [hafen]" href="images/hafen1.jpg">1</
> > a></li>
> > ...
> > <li><a title="Bild 9 von 9 [hafen]" href="images/hafen9.jpg">9</
> > a></li>
> > </ul>
> > </div>
>
> > in the HTML file it starts working just fine. But then I want to
> > change this list and have the a element of the picture in question
> > removed. Which means I change the div "liste" in order to have it look
> > like
>
> > ...
> > <li><a title="Bild 3 von 9 [hafen]" href="images/hafen3.jpg">3</a></
> > li>
> > <li>4</li>
> > <li><a title="Bild 5 von 9 [hafen]" href="images/hafen5.jpg">5</a></
> > li>
> > ...
>
> > After having generated this list a click on one of the links only has
> > the effect of switching to the image's page.
>
> Can you clarify this? Do you have some code that removes the A tag?
Yes, now I can clarify this.
> > Does this mean that jQuery can not access a "generated" element (that
> > was not part of the original HTML file)? In other words, do functions
> > like $.getJSON() not access generated code?
>
> > The JavaScript code that generates the new links inside the ul element
> > looks like this
>
> > for (i = 1; i <= bdaten.serienlaenge; i++) {
> > if (i != bdaten.bildnr) {
> > listentext += '\n\t<li><a title="Bild ' + i + ' von ' +
> > laenge + ' [' + serie + ']" href="images/hafen' + i + '.jpg">' + i +
> > '</a></li>';
> > } else {
> > listentext += '\n\t<li>' + i + '</li>';
> > }
> > }
>
> I don't see any click handler there. Please post all of the relevant code.
The mistake, as had to be expected, was mine not jQuery's :-) What I
had done was putting a click handler in the ready function (see
below), which is read once after loading the document.
Unfortunately, though not surprisingly with hindsight, the links I had
jQuery create were not registered after having been created. This
being done outside hte ready function the code worked alright.
Below is the working Javascript file containing a $('#bilder a').click
() within the ready function and again a $('#bilder a').click()
outside of it (in the function zeigeBild).
// beginning of code
$(document).ready(function() {
$('#bilder a').click(function (evt) {
bildrueckgabe($(this), evt);
}); // $('#bilder a').bind
$.getJSON('php/bilderserie-num.php', 'bild=1'+'&serie=Hafen',
zeigeBild);
}); // Ende von $(document).ready
function bildrueckgabe(objekt, evt) {
evt.preventDefault();
var bildnr = objekt.attr('title').substr(5,1);
var serie = objekt.attr('title').substr(14,5);
$.getJSON('php/bilderserie-num.php', 'bild='+bildnr+'&serie='+serie,
zeigeBild);
}
function zeigeBild (bdaten) { // Anfang der Funktion zeigeBild
var listentext = "\n\t<span class=\"bildervorsatz\">Bilder</span>
\n\t<ul id=\"fuerbildernum\">";
for (i = 1; i <= bdaten.serienlaenge; i++) {
if (i != bdaten.bildnr) {
listentext += '\n\t<li><a title="Bild ' + i + ' von ' +
bdaten.serienlaenge + ' [Hafen]" href="images/Hafen' + i + '.jpg">' +
i + '</a></li>';
} else {
listentext += '\n\t<li>' + i + '</li>';
}
}
listentext += "\n</ul>";
$('#liste').html(listentext);
$('#einbild').html('<img src=\"images/'+bdaten.bild[0]+'.jpg\" /
>');
$('#bildtext').html(bdaten.text[0]);
$('#bilder a').click(function (evt) {
bildrueckgabe($(this), evt);
}); // $('#bilder a').bind
} // Ende der Funktion zeigeBild
// end of code
Sorry for the delay and the admittedly silly mistake...
Best regards,
Henning
aka madhatter
