title: Why emitted events of livewire is not triggered?
body: <p>In laravel 7 learning livewire/livewire 1.3  I encountered that emitted
  events are not always triggered</p>
  <p>I created component with command</p>
  <pre><code>php artisan make:livewire hostel/hostelsHomepageSpotlight
  </code></pre>
  <p>and simplifying the code I do not see alert of event.
  In app/Http/Livewire/Hostel/HostelsHomepageSpotlight.php :</p>
  <pre><code>&lt;?php
  
  namespace App\Http\Livewire\Hostel;
  
  use Auth;
  use DB;
  use App\Config;
  
  use App\Hostel;
  use App\HostelImage;
  use App\library\CheckValueType;
  use App\Settings;
  use Livewire\Component;
  
  class HostelsHomepageSpotlight extends Component
  {
  
      public function render()
      {
  
          $hostels     = [];
          $current_page= 1;
          $hostel_rows_count = Hostel
              ::getByStatus('A')
              -&gt;count();
  
          $this-&gt;emit('hostelsHomepageSpotlightOpened', [ 'mode'=&gt; 'hostels_homepage_spotlight', 'current_page'=&gt;$current_page, 'hostel_rows_count'=&gt;$hostel_rows_count ] ); // EMIT EVENT
  
          return view('livewire.hostel.hostels-homepage-spotlight', [
              'hostelsDataRows' =&gt; $hostels,
              'hostel_rows_count'=&gt; $hostel_rows_count,
              'current_page'=&gt; $current_page,
          ]);
      }
  }
  </code></pre>
  <p>and in resources/views/livewire/hostel/hostels-homepage-spotlight.blade.php:</p>
  <pre><code>&lt;div&gt;
      
      &lt;h1&gt;hostelsHomepageSpotlightOpened&lt;/h1&gt;
  
  &lt;/div&gt;   
  
  &lt;script&gt;
      // If to uncomment line below I see  alert
      // alert( 'resources/views/livewire/hostel/hostels-homepage-spotlight.blade.php::' )
      window.livewire.on('hostelsHomepageSpotlightOpened', data =&gt; {
          // I DO NOT SEE ALERT BELOW ANYWAY
          alert( 'hostelsHomepageSpotlightOpened::' )
          console.log('facility_opened data::')
          console.log(data)
          // alertsInit(data.mode)
          // lazyImagesInit(&quot;img.lazy_image&quot;)
      })
  &lt;/script&gt;
  </code></pre>
  <p>Why event is not triggered ? Is there is a way to debug it ?</p>
  <p><strong>UPDATED # 2:</strong>
  I know the rule about wrapping div(without any class or styles definitions).
  Have I also to remove JS code ?</p>
  <p>I tried to move all JS code in resources/js/app.js :</p>
  <pre><code>window.$ = window.jQuery = require('jquery');
  
  require('./bootstrap');
  
  var Turbolinks = require(&quot;turbolinks&quot;)
  Turbolinks.start()
  
  // If to uncomment the line below I see it
  // alert( '::resources/js/app.js' )
  window.livewire.on('hostelsHomepageSpotlightOpened', data =&gt; {
  // I do not see this alert
      alert( 'hostelsHomepageSpotlightOpened::' )
      console.log('facility_opened data::')
      console.log(data)
      // alertsInit(data.mode)
      // lazyImagesInit(&quot;img.lazy_image&quot;)
  })
  </code></pre>
  <p>and in my resources/views/layouts/app.blade.php :</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;{{ str_replace('_', '-', app()-&gt;getLocale()) }}&quot; xmlns:livewire=&quot;http://www.w3.org/1999/html&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
      
      &lt;title&gt;Laravel:Livewire&lt;/title&gt;
      
      &lt;!-- Fonts --&gt;
      &lt;link href=&quot;https://fonts.googleapis.com/css?family=Nunito:200,600&quot; rel=&quot;stylesheet&quot;&gt;
      
      &lt;link href=&quot;{{ asset('css/bootstrap.min.css') }}&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
      &lt;link rel=&quot;icon&quot; type=&quot;image/png&quot; href=&quot;/favicon.ico&quot;/&gt;
      
      
      &lt;link href=&quot;/css/app.css&quot; rel=&quot;stylesheet&quot;&gt;
      
      &lt;script src=&quot;{{ asset('js/lazyload.js') }}&quot;&gt;&lt;/script&gt;   
      
      &lt;!-- Styles --&gt;
      @livewireStyles
      @livewireScripts
      
      &lt;script src=&quot;{{ asset('/js/app.js') }}&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;{{ asset('/js/app/app_funcs.js') }}&quot;&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body class=&quot;text-center&quot;&gt;
  
  &lt;div class=&quot;flexbox-parent page_container &quot; id=&quot;page_content&quot;&gt;
      &lt;header class=&quot;flexbox-item header&quot;&gt;
              &lt;nav class=&quot;navbar navbar-expand-lg navbar-light bg-light&quot;&gt;
                 ...
              &lt;/nav&gt;
  
      &lt;/header&gt;
      
      &lt;main class=&quot;flexbox-item fill-area content flexbox-item-grow&quot;&gt;
          @yield('content')
      &lt;/main&gt;
      
      &lt;footer class=&quot;flexbox-item footer  ml-3 mr-3&quot;&gt;
          ...
          &lt;p class=&quot;m-2&quot;&gt;copyright_text&lt;/p&gt;
      &lt;/footer&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>And my code is nit triggered anywat!
  I suppose that is valid structure of my app as app.js AFTER    @livewireStyles
  and  @livewireScripts</p>
  <p><strong>UPDATED # 3:</strong></p>
  <p>I tried and that does not work. I have login form :</p>
  <pre><code>&lt;article class=&quot;page_content_container&quot;&gt;
  
     ...    
      &lt;form class=&quot;form-login&quot; wire:submit.prevent=&quot;submit&quot;&gt;
          &lt;input
              wire:model.lazy=&quot;form.email&quot;
              name=&quot;email&quot;
              id=&quot;email&quot;
              class=&quot;form-control editable_field&quot;
              placeholder=&quot;Your email address&quot;
              autocomplete=off
          &gt;
      &lt;/form&gt;
     ...    
      
  &lt;/article&gt; &lt;!-- page_content_container --&gt;
  {{--@push('scripts')--}}
      &lt;script&gt;
          $(&quot;#email&quot;).focus();
      &lt;/script&gt;
  {{--@endpush--}}
  </code></pre>
  <p>When @push/@endpush are commented as on lines above it works ok and focus is set to  email input.
  But if to uncomment these 2 lines focus is not set.</p>
  <p>I modified my resources/views/layouts/app.blade.php :</p>
  <pre><code>&lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
      
      &lt;title&gt;Laravel:Livewire&lt;/title&gt;
      
      &lt;!-- Fonts --&gt;
      &lt;link href=&quot;https://fonts.googleapis.com/css?family=Nunito:200,600&quot; rel=&quot;stylesheet&quot;&gt;
      
      &lt;link href=&quot;{{ asset('css/bootstrap.min.css') }}&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
      &lt;link rel=&quot;icon&quot; type=&quot;image/png&quot; href=&quot;/favicon.ico&quot;/&gt;
      
      
      &lt;link href=&quot;/css/app.css&quot; rel=&quot;stylesheet&quot;&gt;
      
      
      &lt;!-- Styles --&gt;
      @livewireStyles
      
  
      &lt;script src=&quot;{{ asset('/js/app.js') }}&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;{{ asset('js/lazyload.js') }}&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js&quot; defer&gt;&lt;/script&gt;
      
      @livewireScripts
      @stack('scripts')
      
      
      &lt;script src=&quot;{{ asset('/js/app/app_funcs.js') }}&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>app.js - is first as bootstrap and jquery are included there...</p>
  
  <p>Thanks!</p>