JQuery код конфликтует с кнопкой отправка

Question

У меня есть этот код на моем сайте:

$('input[type="submit"], a').not('[target=_blank]').click(function(){ 
     var bad = this.href.lastIndexOf('#') >= 0 || this.href.indexOf('javascript') >= 0; 
     if(!bad) { 
      $(".load-overlay").show(); 
      return true; 
     } 
     return true; 
    }); 

Это, как предполагается, чтобы показать экран загрузки на действительных ссылках; действительные ссылки - это ссылки без javascript в href или с # в href. Также допустимые ссылки не имеют атрибутов target = _blank.

Он выполняет свою работу, но это противоречит кнопкам отправки.

Экран загрузки (.load-overlay) не отображается на кнопках отправки, но он определен в коде. Что с этим связано? У меня нет ошибок в консоли.

Answer 1

Это потому, что вход не имеет атрибута href. Из-за этого будет выбрано Expression TypeError при нажатии кнопки отправки. Вы должны проверить, существует ли this.href, прежде чем использовать его.

изменение

var bad = this.href.lastIndexOf('#') >= 0 || this.href.indexOf('javascript') >= 0; 

в

var bad = typeof this.href !== "undefined" && (this.href.lastIndexOf('#') >= 0 || this.href.indexOf('javascript') >= 0); 

Edit:

Это решает проблему с экран загрузки не появляется при нажатии на кнопку отправки, но и для будущих изменений его хорошо знать, что this.href может вернуть другое значение, чем вы ожидаете.

this.href возвращает полный разобранный URL-адрес, на который ссылается ссылка. Если у вас есть ссылка с относительным URL, это значение отличается от атрибута «href» в вашем HTML. Чтобы получить точное значение атрибута HTML, используйте функцию jQuery Function .attr или функцию JavaScript getAttribute.

Пример: <a href="/home">Home</a>

В этом случае this.href является http://yourdomain.com/home, но это this.getAttribute("href")/home.

Для вашей текущей реализации это не имеет значения. Но, возможно, вы хотите проверить в будущем, если атрибут href STARTS с # или если есть URL-адрес другого сайта до #.