Создана одна страница в начальной загрузке 4. Есть модал.Внутри модального окна, если вы нажимаете на любое поле ввода или любую кнопку, отображается та же ошибка.Я действительно не знаю, что здесь происходит?Когда я нажимаю на поле ввода в этой форме, я получаю сообщение об ошибке в консоли: -
tab.js:146 Uncaught TypeError: Cannot read property 'nodeName' of undefined
at i.t._activate (tab.js:146)
at i.t.show (tab.js:112)
at HTMLDivElement.<anonymous> (tab.js:230)
at Function.each (jquery.min.js:2)
at w.fn.init.each (jquery.min.js:2)
at w.fn.init.i._jQueryInterface [as tab] (tab.js:217)
at HTMLDivElement.<anonymous> (tab.js:245)
at HTMLDocument.dispatch (jquery.min.js:2)
at HTMLDocument.y.handle (jquery.min.js:2)
Да, ниже приведен общий код.На вкладке аккаунта есть модал.Когда вы нажимаете на вкладку учетной записи, затем нажимаете на кнопку «Войти», и вы получите код ошибки в консоли, а на самой странице ничего не происходит.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="autor" content="time">
<meta name="description" content="shows you tech tutorial and life tips.">
<title> Life</title>
<link rel="stylesheet" href="/main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Jumbotron -->
<div class="jumbotron" style="background-color: rgba(0,0,0,0.78);border-radius:0px;">
<!-- logo -->
<div class="logo">
<div class="block">
</div>
<div class="tagline">
</div>
</div>
<!-- logo ends here -->
</div>
<!-- Jumbotron ends here -->
<!-- Nav -->
<ul class="nav nav-tabs justify-content-end">
<li class="nav-item">
<a class="nav-link" href="">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">About</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Account</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Profile</a>
<a class="dropdown-item" href="#">Setting</a>
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#MyModal">Log In</a>
</div>
</li>
</ul>
<!-- Nav ends -->
<!-- <button class="btn btn-primary" data-toggle="modal" data-target="#MyModal" type="button" name="button">Modal</button> -->
<!-- Modal -->
<div class="modal fade" id="MyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<section>
<div class="container">
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active justify-content" id="nav-signIn-tab" data-toggle="tab" href="#nav-signIn" role="tab" aria-controls="nav-signIn" aria-selected="true">Sign In</a>
<a class="nav-item nav-link justify-content" id="nav-signUp-tab" data-toggle="tab" href="#nav-signUp" role="tab" aria-controls="nav-signUp" aria-selected="false">Sign Up</a>
</div>
</div>
</section>
</div>
<div class="modal-body">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-signIn" role="tabpanel" aria-labelledby="nav-signIn-tab"><!-- Sign In tab -->
<div class="signintab" data-toggle="tab">
<form class="frm-group" action="../test.php" method="post" onsubmit="">
<label for="email">E Mail:</label>
<input class="form-control" type="text" id="email" name="email" value="" placeholder="E-Mail">
<label for="Password">Password:</label>
<input class="form-control" type="password" id="pass" name="Password" value="" placeholder="Password">
<span><a href="">Forgot Password?</a></span><br>
<button class="btn btn-primary" type="submit" name="button">Log In</button>
<span id='erroin'></span>
</form>
<!-- <button class="btn btn-secondary" type="submit" name="button" href="#nav-signUp" aria-controls="nav-signUp">Sign Up</button><br> -->
</div>
</div>
<div class="tab-pane fade" id="nav-signUp" role="tabpanel" aria-labelledby="nav-signUp-tab"><div class="signuptab" data-toggle="tab">
<label for="First Name">First Name:</label>
<input class="form-control" type="text" id="fname" name="fname" value="" placeholder="First Name">
<label for="Last Name">Last Name:</label>
<input class="form-control" type="text" id="lname" name="lname" value="" placeholder="Last Name">
<label for="email">E Mail:</label>
<input class="form-control" type="text" id="upemail" name="upemail" value="" placeholder="E-Mail">
<label for="Password">Password:</label>
<input class="form-control" type="password" id="uppass" name="uppassword" value="" placeholder="Password"><br>
<button class="btn btn-secondary" type="button" name="button">Register</button><br>
<span id='erroup'></span>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- modal ends here -->
</body>
</html>
Ниже я предоставляю tab.js
</p>
<code> import $ from 'jquery'
import Util from './util'
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.1.3): tab.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
const Tab = (($) => {
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const NAME = 'tab'
const VERSION = '4.1.3'
const DATA_KEY = 'bs.tab'
const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'
const JQUERY_NO_CONFLICT = $.fn[NAME]
const Event = {
HIDE : `hide${EVENT_KEY}`,
HIDDEN : `hidden${EVENT_KEY}`,
SHOW : `show${EVENT_KEY}`,
SHOWN : `shown${EVENT_KEY}`,
CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`
}
const ClassName = {
DROPDOWN_MENU : 'dropdown-menu',
ACTIVE : 'active',
DISABLED : 'disabled',
FADE : 'fade',
SHOW : 'show'
}
const Selector = {
DROPDOWN : '.dropdown',
NAV_LIST_GROUP : '.nav, .list-group',
ACTIVE : '.active',
ACTIVE_UL : '> li > .active',
DATA_TOGGLE : '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]',
DROPDOWN_TOGGLE : '.dropdown-toggle',
DROPDOWN_ACTIVE_CHILD : '> .dropdown-menu .active'
}
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
class Tab {
constructor(element) {
this._element = element
}
// Getters
static get VERSION() {
return VERSION
}
// Public
show() {
if (this._element.parentNode &&
this._element.parentNode.nodeType === Node.ELEMENT_NODE &&
$(this._element).hasClass(ClassName.ACTIVE) ||
$(this._element).hasClass(ClassName.DISABLED)) {
return
}
let target
let previous
const listElement = $(this._element).closest(Selector.NAV_LIST_GROUP)[0]
const selector = Util.getSelectorFromElement(this._element)
if (listElement) {
const itemSelector = listElement.nodeName === 'UL' ? Selector.ACTIVE_UL : Selector.ACTIVE
previous = $.makeArray($(listElement).find(itemSelector))
previous = previous[previous.length - 1]
}
const hideEvent = $.Event(Event.HIDE, {
relatedTarget: this._element
})
const showEvent = $.Event(Event.SHOW, {
relatedTarget: previous
})
if (previous) {
$(previous).trigger(hideEvent)
}
$(this._element).trigger(showEvent)
if (showEvent.isDefaultPrevented() ||
hideEvent.isDefaultPrevented()) {
return
}
if (selector) {
target = document.querySelector(selector)
}
this._activate(
this._element,
listElement
)
const complete = () => {
const hiddenEvent = $.Event(Event.HIDDEN, {
relatedTarget: this._element
})
const shownEvent = $.Event(Event.SHOWN, {
relatedTarget: previous
})
$(previous).trigger(hiddenEvent)
$(this._element).trigger(shownEvent)
}
if (target) {
this._activate(target, target.parentNode, complete)
} else {
complete()
}
}
dispose() {
$.removeData(this._element, DATA_KEY)
this._element = null
}
// Private
_activate(element, container, callback) {
let activeElements
if (container.nodeName === 'UL') {
activeElements = $(container).find(Selector.ACTIVE_UL)
} else {
activeElements = $(container).children(Selector.ACTIVE)
}
const active = activeElements[0]
const isTransitioning = callback &&
(active && $(active).hasClass(ClassName.FADE))
const complete = () => this._transitionComplete(
element,
active,
callback
)
if (active && isTransitioning) {
const transitionDuration = Util.getTransitionDurationFromElement(active)
$(active)
.one(Util.TRANSITION_END, complete)
.emulateTransitionEnd(transitionDuration)
} else {
complete()
}
}
_transitionComplete(element, active, callback) {
if (active) {
$(active).removeClass(`${ClassName.SHOW} ${ClassName.ACTIVE}`)
const dropdownChild = $(active.parentNode).find(
Selector.DROPDOWN_ACTIVE_CHILD
)[0]
if (dropdownChild) {
$(dropdownChild).removeClass(ClassName.ACTIVE)
}
if (active.getAttribute('role') === 'tab') {
active.setAttribute('aria-selected', false)
}
}
$(element).addClass(ClassName.ACTIVE)
if (element.getAttribute('role') === 'tab') {
element.setAttribute('aria-selected', true)
}
Util.reflow(element)
$(element).addClass(ClassName.SHOW)
if (element.parentNode &&
$(element.parentNode).hasClass(ClassName.DROPDOWN_MENU)) {
const dropdownElement = $(element).closest(Selector.DROPDOWN)[0]
if (dropdownElement) {
const dropdownToggleList = [].slice.call(dropdownElement.querySelectorAll(Selector.DROPDOWN_TOGGLE))
$(dropdownToggleList).addClass(ClassName.ACTIVE)
}
element.setAttribute('aria-expanded', true)
}
if (callback) {
callback()
}
}
// Static
static _jQueryInterface(config) {
return this.each(function () {
const $this = $(this)
let data = $this.data(DATA_KEY)
if (!data) {
data = new Tab(this)
$this.data(DATA_KEY, data)
}
if (typeof config === 'string') {
if (typeof data[config] === 'undefined') {
throw new TypeError(`No method named "${config}"`)
}
data[config]()
}
})
}
}
/**
* ------------------------------------------------------------------------
* Data Api implementation
* ------------------------------------------------------------------------
*/
$(document)
.on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
event.preventDefault()
Tab._jQueryInterface.call($(this), 'show')
})
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
*/
$.fn[NAME] = Tab._jQueryInterface
$.fn[NAME].Constructor = Tab
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT
return Tab._jQueryInterface
}
return Tab
})($)
export default Tab
</code>