jquery - 单击外部 jQuery 选择器仍会激活功能

Question

按照 JS Riddle 中的以下步骤查看问题:

1. 转到 http://jsfiddle.net/MjrFC/1/
2. 在结果区域中单击“测试”一词，这会打开点 1
3. 您应该只能点击单词 test(point1) 和单词 hey(point2)，但是如果您点击 h1 标签，它会转到点 1。

下面的代码

    <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);

           });
       });

Answer 1

您的 point1 和 point2 变量不应包含 contentb div，因为您将 html 附加到具有类 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);

    });
});

演示:Fiddle