Home/ Questions/Q 7703591
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T23:29:40+00:00

I simplified my code for next example. So, please don’t be wondered why I’m

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0