Click on sub-item

Question

There is an image above which a click event is applied, after which the image disappears and 4 blocks appear. How to make, that at repeated clique interaction went with the appeared blocks, but not with the parent?

$(document).ready(function() { $('div').on('click', function() { a = '.' + $(this).attr("class"); console.log(a); $(this).empty(); $(toper()).appendTo(this); event.stopPropagation(); }); }) function toper() { b = a.slice(1); for (var i = 1; i < 5; i++) { var c = '<div class="' + b + i + '">' + i + '</div > '; $(c).appendTo(a).addClass('size'); }}

 * { margin: 0; } .content, .contentt { width: 624px; height: 624px; border: 1px solid #000; margin: 12px auto 0 auto; } .content1, .content2, .content3, .content4 { background: #789; } .size { float: left; width: 50%; height: 50%; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content"> <img src="http://www.artscroll.ru/Images/2008/a/Alexander%20Jansson/000017.jpg" alt="Изображение не загрузилось :-("> </div>

@ L.Vadim, when I clicked again in my program, clicked on the content class, and not on the created new divs from the toper function

Accepted Answer · 2017-02-12T10:52:15

Turn off the Click event:

 $(this).off('click')

 $(document).ready(function() { $('div').on('click', function() { a = '.' + $(this).attr("class"); console.log(a); $(this).empty(); $(toper()).appendTo(this); $(this).off('click') //отключаем обработчик клика event.stopPropagation(); }); }) function toper() { b = a.slice(1); for (var i = 1; i < 5; i++) { var c = '<div class="' + b + i + '">' + i + '</div > '; $(c).appendTo(a).addClass('size').on('click', function() { console.log('нажат внутренний див', $(this).text()); }) }}

 * { margin: 0; } .content, .contentt { width: 624px; height: 624px; border: 1px solid #000; margin: 12px auto 0 auto; } .content1, .content2, .content3, .content4 { background: #789; } .size { float: left; width: 50%; height: 50%; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content"> <img src="http://www.artscroll.ru/Images/2008/a/Alexander%20Jansson/000017.jpg" alt="Изображение не загрузилось :-("> </div>

Click on sub-item

1 answer 1

More articles: