1

A simple question:

When I use 

$(document).on('click', '.btn-del-top', function(e) {})

everyhing work, but if I use 

$('.btn-del-top').on('click', function(e) {})

nothing work.Is there some explanation?

Kilian Stinson
  • 2,376
  • 28
  • 33
Momo1987
  • 544
  • 6
  • 16
  • 1
    Don't put tags in your question title. **Do** put code in code blocks. – T.J. Crowder Aug 07 '13 at 11:36
  • 2
    There can be dozens of explanations... where is your code? Do you have your code inside `$(document).ready();` ? Is .btn-del-top loaded after the DOM has finished? – Zim84 Aug 07 '13 at 11:37
  • Can you explain a bit more about what you want to achieve ? – fmgp Aug 07 '13 at 11:38
  • 1
    [In jQuery, how to attach events to dynamic html elements?](http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements) – Vucko Aug 07 '13 at 11:38
  • Read next topic http://jquerybyexample.blogspot.co.il/2013/04/direct-vs-delegated-events-with-jquery-on-method.html?m=1 – Dima Kuzmich Aug 07 '13 at 11:40

3 Answers3

3

it could be because btn-del-top elements are created dynamically or are created after the $('.btn-del-top').on('click', function(e) {}) code is executed.

Demo1: In this case it is not working because the code is not inside dom ready

Arun P Johny
  • 384,651
  • 66
  • 527
  • 531
  • 1
    @Momo1987 no... only one of the formats of `on()` is a replacement of `live()` that is the one working – Arun P Johny Aug 07 '13 at 11:44
  • Ah ok thanx for the information, so for dynamically created element iI need to use $(document).on('click', '.btn-del-top', function(e) {}) ,right? – Momo1987 Aug 07 '13 at 11:48
0

The main reason would be that when you run the second code snippet, the elements don't exist yet, so they aren't found, and so they aren't hooked up. The first code snippet doesn't look for them until it sees a click on document (e.g., probably much later).

The reason they aren't found may vary:

  1. If your code looking for them is in a script tag above where they're defined in the HTML, they won't exist yet. For instance:

    <!-- Won't work, the element doesn't exist when you look for it -->
<script>
$('.btn-del-top').on('click', function(e) {})
</script>
<span class="btn-del-top">...</span>

    But:

    <!-- Will work, the element exists when you look for it -->
<span class="btn-del-top">...</span>
<script>
$('.btn-del-top').on('click', function(e) {})
</script>

    And:

    <!-- Will work also work, jQuery will call your code later when
     all elements in the markup have been created -->
<script>
$(function() { // shortcut for `$(document).ready(...)`
    $('.btn-del-top').on('click', function(e) {})
});
</script>
<span class="btn-del-top">...</span>

  2. If you create them later using code, they won't exist earlier when you try to hook them up.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
0

If you're adding .btn-del-top dynamically, the second one binds before that element exists, thus it doesn't bind.

Tdelang
  • 1,298
  • 2
  • 12
  • 20