jQuery - 'once' won't apply a toggleclass after a click action [closed]

Question

I want a click on #parent to toggleClass a 'newclass', on the parent's child element, 'child'. The page has an AJAX call, so I need the function to only apply on page load.

However, I can only get the 'newclass' to begin to toggle on the last AJAX call, I'm not sure why. Before the last AJAX call, clicking #parent has no effect.

Also, #parent is not unique, hence the $(this). (I only want it to toggle the class for the .child that had it's #parent clicked).

Any ideas why this won't work?

<div id="#parent">
  <div class="child">
  Content #1
  </div>
</div>
<div id="#parent">
  <div class="child">
  Content #2
  </div>
</div>

(function ($) {
Drupal.behaviors.arbitrarystring = {
attach:function(context, settings) {
$('#parent').once('arbitrarytitle', function() {
$('#parent').click(function() {
$(this).children('#child').toggleClass("newclass");

});
});
}
};

Tried setting up a JS fiddle, but was having problems to emulate the AJAX calls.

Thanks everyone!

EDIT: Here is the fiddle, without AJAX Request or the Drupal.behaviors wrapper; I was getting a syntax error when trying to close the brackets.

http://jsfiddle.net/fj6cedqf/

Answer 1

You should have unique id's (#id-name) and as many elements as you would like sharing the same class (.class-name). I mean, you should not have multiple elements with same id inside HTML. Also, you cannot have [#] or [.] signs inside HTML. They should appear only inside CSS and jQuery code.

Here you can find the solution:

http://jsfiddle.net/6n02htLp/