jQuery code never executed

Question

I have jQuery code which is never executed. When I'm trying the same code in the browser console it works, so I don't understand why my code is never executed.

HTML CODE :

<div id="ans">
     <label>{$valeur}</label>
     <div class="radio">
         {foreach $reponse as $ligne}
             <input type="radio" name="answers" id="answer_{$ligne@iteration}" value="{$ligne@iteration}"/><label for="answer_{$ligne@iteration}">$ligne</label><br />
         {/foreach}
     </div>
</div>

Update :

document.addEventListener("DOMContentLoaded", function() {
  setTimeout(function(){
    $.post(ajax_path+"bla.php", {} , function(response) {
          $('#quest').html(response);
          $('#quest').collapse("show");
    })
    .fail(function(jqXHR, textStatus, errorThrown) {
        {/literal}
        toastr.error(__['Error'], __['Error']);
        {literal}
    });
  }, 50);

  $('input[name=answers]').on('change', function () {
      $(this).closest("form").submit();
    });
});

Your jQuery probably loaded after `DOMContentLoaded`. Use `$( document ).ready` — Koby Douek, Sep 11 '17 at 08:40
@Mulan Then i guess you haven't included jquery correctly in your page — Carsten Løvbo Andersen, Sep 11 '17 at 08:45
If my asnwer still does not fix your issue, please edit your question and add the HTML page. — Koby Douek, Sep 11 '17 at 08:48
In just about all modern browsers, `DOMContentLoaded` is exactly what jQuery's `document.ready` is using under the hood — adeneo, Sep 11 '17 at 08:52
What happens if you simply add an `alert("x")` inside the `addEventListener` ? — freedomn-m, Sep 11 '17 at 09:12
@adeneo it's not that simple. On this SO page (now, once it's loaded), open the console and enter `document.addEventListener("DOMContentLoaded", function() { alert("X"); });$(document).ready(function() { alert("Y"); })` - what happens? You only get the Y alert, not the X. Always use `$(document).ready()` regardless of what it might do in the background in some cases. — freedomn-m, Sep 11 '17 at 09:15
Does that explain your issue? When your jquery runs, the DOM elements do not exist. So you don't get the event handler assigned to them. So your code is being executed, but there's nothing to execute it against. It's most likely because your code runs before the HTML is generated - this may be because the HTML is added dynamically after the 'DOMContentLoaded' event - first change would be to use `$(function() ` (aka document.ready) but you say you've done that. So next best guess is that you're using AJAX to load your radio buttons some time later. — freedomn-m, Sep 11 '17 at 09:27
Either add your event handler at the time you load the HTML (once loaded) or use event delegation: Change your event handler to `$(document).on('change', 'input[name=answers]', function() { $(this).closest("form").submit(); })` — freedomn-m, Sep 11 '17 at 09:28
@freedomn-m - the reason that works in the console, is because `DOMContentLoaded` fires when the entire DOM has loaded *(not images etc)*, but it doesn't randomly fire after that. jQuery fires the `ready` handler at any given time, as long as it's after `DOMContentLoaded`. As long as the handler for `DOMContentLoaded` is in the DOM, and added before the event actually fires, it works the same way. — adeneo, Sep 11 '17 at 09:29
@adeneo that's exactly my point. They're not equivalent. DOMContentLoaded won't fire if already loaded while jquery doc.ready *does*. So you can add jquery.doc ready calls and not have to worry about whether or not the page has already loaded. There's too many "as long as"s in your comment for my liking :) — freedomn-m, Sep 11 '17 at 09:31
Indeed i'm using AJAX to load the radio buttons, I'll update my post with the ajax. — Mulan, Sep 11 '17 at 09:31
@freedomn-m - unless you place `DOMContentLoaded` inside async code, that isn't really an issue. Also, see [the source](https://github.com/jquery/jquery/blob/master/src/core/ready.js) line 80 — adeneo, Sep 11 '17 at 09:33
@Mulan - would have been a good idea to lead with that information, as that's why your event handler doesn't work, it needs to be delegated — adeneo, Sep 11 '17 at 09:35
@Mulan in which case it's a common problem, but at least you have some new methods to find the issue. See: https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — freedomn-m, Sep 11 '17 at 09:35

ahhmarr · Answer 1 · 2017-09-11T09:04:17.963

0

$(function() {

    $('input[name=answers]').change(function() {

        $(this).closest("form").submit();
    });

});

try with this

Also, make sure selector is correct

Edit

when you want to execute when all of page contents are loaded you can use load instead of ready

something like this

$(document).load(function() {
     $('input[name=answers]').change(function() {

         $(this).closest("form").submit();
     });
 })

Also, you can use window instead of document also

edited Sep 11 '17 at 09:04

answered Sep 11 '17 at 08:44

ahhmarr

2,296
4
27
30

It still doesn't work. The selector is correct, because when i try this code in the browser console it works. – Mulan Sep 11 '17 at 08:50
I had to write on('load, function () {... to make it work, but my code is still never executed :/ – Mulan Sep 11 '17 at 09:11

jQuery code never executed

1 Answers1

Edit