Scope in jQuery(javascript)

Question

I simplified my code for next example. So, please don't be wondered why I'm using ajax here.

 <!DOCTYPE>
<head>
     <style>.not { background:yellow; }</style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    $(document).ready(function() {
        $(".not").click(function(e){
            e.stopPropagation();
            alert('good');
        });
        $(".click").click(function(e){
            $.post('page2.php', 'q=1', function(data){
                $('body').append('<p class="click">Click here to add new paragraph <span class="not">[not here]</span></p>');
            }, "json");
        });
    });
    </script>
</head>
<body>
    <p class="click">Click here to add new paragraph <span class="not">[not here]</span></p>
</body>

New rows don't make any alert for class=not! It is inexplicably for me :'(

Thanks for unswer!

section <span class="not">[not here]</span> of new rows, don't see $(".not").click(function(e){ e.stopPropagation(); alert('good'); }); — Vitalii Plodistov
– Vitalii Plodistov, Commented Mar 26, 2012 at 16:41
actually, the ajax IS necessary for this example. it's what's not working. — Dan Davies Brackett
– Dan Davies Brackett, Commented Mar 26, 2012 at 16:42

bfavaretto · Accepted Answer · 2012-03-26 17:17:12Z

6

Assuming jQuery 1.7.x, use this:

$(document).on('click', ".not", function(e){
   alert('good');
}).on('click', ".click", function(e){
   if(!$(e.target).is('.not')) {
      $('body').append('<p class="click">Click here to add new paragraph <span class="not">[not here]</span></p>');
   }
});

The problem is, .click will only bind to elements that exist when it's called. Using .on the way I'm suggesting delegates the click handling to the document element. By passing a selector as the second argument, you tell jQuery to run the event handler only if the event target matches the selector.

edited Mar 26, 2012 at 17:17

answered Mar 26, 2012 at 16:41

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

bfavaretto Over a year ago

@Pointy, you're right. I'm removing that line from the example, since I don't see any reason to be using it anyway.

user1106925 Over a year ago

The reason would be to prevent clicks inside the span from triggering the handler on the ".click" element. With your current code, the events will still bubble up from the [not here].

bfavaretto Over a year ago

@amnotiam: Added a check based on event.target to deal with that. I guess I'm just answering this kind of question too fast.

Niet the Dark Absol · Accepted Answer · 2012-03-26 16:41:20Z

1

Put the $(".not")... part inside a function, such as disableNot = function() {$(".not").click......}. Then, after appending the new paragraph, call disableNot() to update the event handlers. (Also call disableNot immediately after defining it, so any .not elements already on the page are given their handlers.)

answered Mar 26, 2012 at 16:41

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Comments

Dan Davies Brackett · Accepted Answer · 2012-03-26 16:41:38Z

1

In your ready event handler, you use $('.not).click. click is an alias for bind, and bind only works on elements that are already in the DOM.

If you're using jQuery 1.7, you can use on instead, in its delegate-like form.

answered Mar 26, 2012 at 16:41

Dan Davies Brackett

10.1k2 gold badges36 silver badges55 bronze badges

Collectives™ on Stack Overflow

Scope in jQuery(javascript)

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related