1

Given 

$(function() {
  $(".planChoice").on("click", function() {
    console.log(123)
  });
  
  console.log($(".planChoice").length)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

jQuery happilly allows chaining .on() to jQuery() call where selector passed to jQuery() does not exist in document. Where .addEventListener() throws a TypeError

Cannot read property 'addEventListenet' of null

$(function() {
  document.querySelector(".planChoice")
  .addEventListener("click", function() {
    console.log(123)
  });
  
  console.log(document.querySelector(".planChoice").length)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

How can we adjust (improve) jQuery() to throw the same TypeError when the selector or element does not exist in document at the time jQuery() is called and, or a jQuery method is chained to the jQuery() call which returns a jQuery object - though no underlying element exists matching the selector string within document at the time of the call?

guest271314
  • 1
  • 15
  • 104
  • 177
  • This **is** the improvement, jQuery fails silently when the element doesn't exist – adeneo Aug 11 '17 at 16:36
  • @adeneo Not sure what you mean? Do you mean that the current implementation of [`jQuery()`](https://api.jquery.com/jquery) to fail silently is by design of the jQuery authors and contributors, and considered as an "improvement"? We can use `.is()`, which an option, though am also interested in adjusting `jQuery()` function itself. The present Question stems from point mentioned by @brk at https://stackoverflow.com/questions/45639528/ajax-not-working-properly/45639591?noredirect=1#comment78238827_45639591 – guest271314 Aug 11 '17 at 16:38
  • Yes, I mean that it's designed to fail silently if an element isn't found. – adeneo Aug 11 '17 at 16:45
  • @adeneo Can you provide a link to that discussion at an issue or documentations? – guest271314 Aug 11 '17 at 16:46
  • I don't think there's much of a discussion, it's just a known. jQuery goes out of it's way to make sure that it's methods don't throw errors, and just fails silently. – adeneo Aug 11 '17 at 16:48

2 Answers2

2

If you really want to throw an error, you can edit jQuery() / $

$ = function (selector, context) {
    var el = new jQuery.fn.init(selector, context);
    if (el.length === 0) throw new Error('fail : "' + selector + '" Not Found');
    return el;
}

$('body'); // okay, returns element

$('nosuchthing'); // fail, throws error
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Another way would be to just return null or undefined instead of an empty collection, and let the next function chained on throw the error

$ = function (selector, context) {
  var el = new jQuery.fn.init(selector, context);
    if (el.length === 0) return null;
    return el;
}

$('body').on('click', function() {}) // hunkydory
$('nosuchthing').on('click', function() {}) // can't read property "on" of "null"
adeneo
  • 312,895
  • 29
  • 395
  • 388
0

If you do want the error to be thrown, just use the vanilla javascript instead of the jquery function.

Daron Spaulding
  • 71
  • 5