0

This works perfect in jsfiddle but when I place the exact code in my local copy the 'on click' event is not firing. I have jquery, can't figure out why. Any thoughts appreciated.

https://jsfiddle.net/3d867zeu/8/

$( ".dropdown-check-list li input" ).on( "click", function() {
  var maxCheckedAllowed = 2;
  var n = $( ".dropdown-check-list li input:checked" ).length;
  if (n == maxCheckedAllowed) {
    $('.dropdown-check-list li input:not(:checked)').prop('disabled', true);
  } else {
    $('.dropdown-check-list li input:not(:checked)').prop('disabled', false);
  }
});
user3105748
  • 123
  • 7
  • Well, what's different about your local copy? Any ajax refreshes involved? – Evan Knowles Sep 04 '17 at 13:35
  • It is identical - no ajax. I just copy it over and the behavior does not occur. – user3105748 Sep 04 '17 at 13:36
  • Is the element being added to the DOM dynamically? Are you including your jQuery script before the

    so the DOM has had a chance to load before you start manipulating it? Could be lots of things...

     – Andy Sep 04 '17 at 13:36
  • 2
    If you want to cath error, you should bring your original code what make error. – kyun Sep 04 '17 at 13:36
  • 1
    Something is obviously not the same, either the markup causing the selectors to be incorrect or if you get no error in the console, possibly the code is running before the elements are in the DOM – Nope Sep 04 '17 at 13:37
  • 3
    jsfiddle will automatically put your code inside `onLoad` (for standard javascript) - you need to wrap your code. – freedomn-m Sep 04 '17 at 13:37
  • I do have my code wrapped in document.ready. – user3105748 Sep 04 '17 at 13:38
  • Do you have any HTML loaded via ajax (specifically `dropdown-check-list` or its content)? (update: looks like you already answered this) – freedomn-m Sep 04 '17 at 13:40
  • 1
    @Satpal hard to tell, OP states that there's no ajax and that the script is inside `document.ready()` - yet comment on event delegation answer implies one of these is not correct. If it's just that the script is in `` without `doc ready` then it's not a duplicate (of course). – freedomn-m Sep 04 '17 at 13:44

1 Answers1

0

Try below option for your local.

When you create a $( ".dropdown-check-list li input" ) this click event , that time if your dropdown check box is bind before this click event code is excute then your click is work. But in my case i create a click event using a document , so every time when click is fire on .dropdown-check-list li input on this class that time my click event is fire. Hope you understand this explanation.

$(document).on( "click",".dropdown-check-list li input", function() {
  var maxCheckedAllowed = 2;
  var n = $( ".dropdown-check-list li input:checked" ).length;
  if (n == maxCheckedAllowed) {
    $('.dropdown-check-list li input:not(:checked)').prop('disabled', true);
  } else {
    $('.dropdown-check-list li input:not(:checked)').prop('disabled', false);
  }
});
chirag satapara
  • 1,947
  • 1
  • 15
  • 26
  • This works - could you explain why your code works and mine does not? – user3105748 Sep 04 '17 at 13:39
  • This uses delegated events, which you need if your code runs *before* the html is ready - either because the html is loaded after this script has run (hence all the questions in comments about loading via ajax) or because your script is not run in `document.read(function() { .. here .. })` which would be difference between your code and jsfiddle. – freedomn-m Sep 04 '17 at 13:42