Question

当将选择器传递给 jQuery() 时，如果文档中不存在，如何捕获，以阻止进一步可能的错误或遗漏？

2017-08-11

306

javascript jquery error-handling runtime-error

鉴于

$(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 很高兴地允许将 .on() 链接到 jQuery() 调用，其中传递给 jQuery() 的选择器在 document 中不存在。其中 .addEventListener() 抛出 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>

当在调用 jQuery() 时选择器或元素在 document 中不存在，或者 jQuery 方法链接到返回 jQuery 对象的 jQuery() 调用时，我们如何调整（改进） jQuery() 以抛出相同的 TypeError - 尽管在调用时不存在与 document 中的选择器字符串匹配的底层元素？

Answer 1

如果您确实想抛出错误，可以编辑 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>

另一种方法是仅返回 null 或 undefined 而不是空集合，然后让链接的下一个函数抛出错误

$ = 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"

Answer 2

如果您确实希望抛出错误，只需使用原始 javascript 而不是 jquery 函数。

Daron Spaulding

2017-08-11