css - Clicking outside jQuery selecter still activates function -

follow these steps @ js riddle see problem:

1. goto http://jsfiddle.net/mjrfc/1/
2. in result area click word "test" opens point 1
3. you should able click word test(point1) , word hey(point2) if click h1 tag says hello goes point 1.

the code below

    <div class="contentb">         <h1>testing hello world</h1>         <div class="point1">test</div>     </div>          point1 = '<div class="contentb"> <h1>hello</h1><div class="point1"> test</div><div class="point2">hey</div><h1>world</h1></div>';         point2 = '<div class="contentb"> <div class="point1"> test</div></div>';         var classname = "broken";        $(document).on('click', '.contentb [class]', function () {            $(this).fadeto(250, 0.25, function () {                classname = this.classname;                 $('.contentb').html(window[classname]);                  $(this).fadeto(250, 1.00);             });        }); 

your point1 , point2 variables should not contain contentb div since appending html element class contentb

point1 = '<h1>hello</h1><div class="point2"> test</div><div class="point2">hey</div><h1>world</h1>'; point2 = '<div class="point1"> test</div>';  var classname = "broken"; $(document).on('click', '.contentb [class]', function () {     $(this).fadeto(250, 0.25, function () {         classname = this.classname;          $('.contentb').html(window[classname]);           $(this).fadeto(250, 1.00);      }); }); 

demo: fiddle