jquery click event only works once

Question

I've been researching this all morning and am missing something.

Here is the basic setup and code:

<script  src="/mwebphoto/js/jquery-2.0.3.js"></script>

<div id="slideshow">
</div>

</head>
<body>

<ul id="gallery_id">
 <li id="newYork">New York</li>
 <li id="disconnection">Disconnexion</li>
 <li id="jackAtSea">Jack at Sea</li>
</ul>
<script>

  $(document).ready(function () {

      $("#gallery_id li").click(function () {
          var htmlTitle = (this.id);

          $.ajax({
              type: "GET",
              url: "/mwebphoto/xml/albums.xml",
              dataType: "xml",
              success: function (xml) {
                  $(xml).find('album').each(function () {
                      var xmlAlbum = $(this);
                      var xmlTitle = $(this).find('title').text();
                      var xmlEmbedCode = $(this).find('embedCode').text();
                        if (xmlTitle == htmlTitle) 
                          alert(xmlTitle)
                          $("#slideshow").replaceWith(xmlTitle)

                  });
              }
          });
      });

  });
</script>

(note, I've edited this in response to the answers, starting here)

I believe the problem is here:

if(xmlTitle==htmlTitle) 
  alert(xmlTitle) 
  $("#slideshow").replaceWith(xmlTitle)

The alert works fine. But the .replaceWith puts the second li (disconnection) in the div no matter which list item I click.

You can see here: http://mwebphoto.com/mwebphoto/html/2ndJqueryPage.html

From a semantic point of view, assuming clicking the list items alters some content, they should probably contain anchor tags. — Chris Brown, Aug 06 '13 at 14:42
Are you replacing your click target element when you run the ajax callback? That would kill your click handler. — Chris Farmer, Aug 06 '13 at 14:42
Have you tried this instead ? `$(document).on('click','#gallery_id li',function(e){...` Cause actually you are binding the handler to every li elements inside #gallery_id li, but you have none. — nubinub, Aug 06 '13 at 14:43
Do you really have a `
` within the `` tag? I'm thinking that's invalid html. — Jason P, Aug 06 '13 at 14:44
I updated my entry to narrow the problem, which seems to be with the .replaceWith() function. Now it puts the second list item in the div no matter which item is clicked, even though the alert works correctly. As currently set up, it should come back with an xml title match for the id on the list item. You can see at http://mwebphoto.com/mwebphoto/html/2ndJqueryPage.html — mweb202, Aug 06 '13 at 16:11

Praveen · Answer 1 · 2013-08-06T14:56:49.880

2

$("#gallery_id li").on('click', 'li', function(e) {
       //represents li within li
  });

it should be either

$("#gallery_id li").on('click', function(e) {
       alert(this.id);
  });

or

$("#gallery_id").on('click','li', function () {
         alert(this.id);
     })

or

$(document).on('click','#gallery_id li', function () {
         alert(this.id);
     })

Try this.

Updates:

To show the difference, I have created

Hope you find the differences.

edited Aug 06 '13 at 14:56

answered Aug 06 '13 at 14:42

Praveen

55,303
33
133
164

I believe the problem is here: if(xmlTitle==htmlTitle) $("#slideshow").replaceWith(xmlTitle) alert(xmlTitle) The alert works fine if the .replaceWith is commented. But when the .replaceWith is active, the alert loops through all three options, then I am unable to click again. – mweb202 Aug 06 '13 at 15:34
Ignore last reply. Here's the situation: I believe the problem is here: if(xmlTitle==htmlTitle) alert(xmlTitle) $("#slideshow").replaceWith(xmlTitle) The alert works fine. But the .replaceWith puts the second
(disconnection) in the
no matter which list item I click.

mweb202

Aug 06 '13 at 15:59

@mweb202 can you share the xml file? what is this ` $(xml)` – Praveen Aug 06 '13 at 16:21

xml file is here: http://mwebphoto.com/mwebphoto/xml/albums.xml. The `$(xml)` part finds the children of node "album". That part seems to be working correctly. Here is the link to a test page: http://mwebphoto.com/mwebphoto/html/2ndJqueryPage.html – mweb202 Aug 06 '13 at 16:46

score 0 · Answer 2 · answered Aug 06 '13 at 15:25

If your html is

<ul id="gallery_id">
   <li>1</li>
   <li>2</li>
</ul>

Try with this code. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector.

 $("#gallery_id").on('click','li', function () {
         // your code
     })

jquery click event only works once

2 Answers2