1

WordPress has a div .tagchecklist with spans (tags) inside it. I'm trying to count these spans but I always get 0.

My code is the following:

jQuery( document ).ready( function() {
  console.log( jQuery( '.tagchecklist > span' ).length );
})

The .tagchecklist div is updated with spans if I add a new tag or select it from the list, but the console always output 0. Is there any way to live-check it?

<div class="tagchecklist">
  <span><a id="faq_section-check-num-0" class="ntdelbutton">X</a>&nbsp;ecr</span>
  <span><a id="faq_section-check-num-1" class="ntdelbutton">X</a>&nbsp;ecrrec</span>
  <span><a id="faq_section-check-num-2" class="ntdelbutton">X</a>&nbsp;ercerce</span>
</div>

<p id="tagcloud-faq_section" class="the-tagcloud">
    <a href="#" class="tag-link-4" title="2 topics" style="font-size: 14.3pt;">Account</a>
    <a href="#" class="tag-link-2" title="4 topics" style="font-size: 22pt;">Introduction</a>
    <a href="#" class="tag-link-7" title="1 topic" style="font-size: 8pt;">Other</a>
    <a href="#" class="tag-link-3" title="2 topics" style="font-size: 14.3pt;">Pricing &amp; Billing</a>
</p>

Somehow I just did:

jQuery( document ).ready( function() {
  jQuery( '#faq_section' ).on( 'click', '.tagadd, .ntdelbutton, .the-tagcloud > a', function() {
    console.log( jQuery( '.tagchecklist span' ).length );
  } )
})

And it works for adding a tag, but for .ntdelbutton and .the-tagcloud > a it doesn't update!

Rafff
  • 1,510
  • 3
  • 19
  • 38
  • 1
    Can you give us a sample of the HTML? Should you probably exclude the `>` (direct descendant), if the spans are not necessarily children? – PeterKA Nov 07 '14 at 15:54
  • Are the span elements added dynamically? If so, you may be trying to count them before they are included in the DOM. – Rory McCrossan Nov 07 '14 at 15:55
  • They are direct children (I'm sure), and yes, they are (spans) added dynamically to the div. See my updated question. – Rafff Nov 07 '14 at 16:01

2 Answers2

2

One solution is to add it inside the event like:

$(":button").on("click", function() {
  $(".tagchecklist").append("<span></span");
  console.log($(".tagchecklist > span").length);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tagchecklist"></div>
<input type="button" value="Add span" />
Alex Char
  • 32,879
  • 9
  • 49
  • 70
1

@Alex's answer is the ideal place to do what you need. Otherwise, you need to watch for changes to a DOM element, which is answered here: Detect element content changes with jQuery

Community
  • 1
  • 1
lsubi
  • 116
  • 6
  • Thanks. But why clicking on `.addtag` works, and clicking other elements don't? Also tried to replace `on` to `live`... – Rafff Nov 07 '14 at 16:31
  • live is deprecated, on is the right way to bind events. – lsubi Nov 07 '14 at 17:04
  • From jquery docs: Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler, as described next. – lsubi Nov 07 '14 at 17:05
  • are you sure your selector is the proper parent element for your code to work? – lsubi Nov 07 '14 at 17:06
  • Yes. Because `.addtag` works and other selectors not. "attach event handlers after the new HTML is placed into the page" - how can I do this? – Rafff Nov 07 '14 at 17:07
  • Just tested and it appears to work: http://jsfiddle.net/pxLe23x3/ If the element with ID faq_section used in your selector is indeed the parent then it should work. Perhaps the js code generating the new DOM elements is unbinding events. Need better sample of your code to debug. – lsubi Nov 07 '14 at 20:25
  • Thanks for your time. I'll be trying on wordpress stackexchange because this question seems to be related more to wordpress than jquery. – Rafff Nov 07 '14 at 20:30