javascript - Bootstrap 导航选项卡单击事件有效，选项卡标签单击除外

Question

您好，我已经研究了大约 1/2 小时 - 这似乎微不足道，但我想在这方面为客户提供良好的服务。

我们已经设置了一个表单，其中包含一系列选项卡内的部分。现在，我只是尝试在最后一个选项卡处于事件状态时将“保存并继续”按钮更改为“提交” - 通过用户点击“保存并继续”按钮或单击顶部的选项卡 - 稍后我们将添加提交验证等。但我认为让按钮文本更改工作将使我足够熟悉(由其他人)构建的内容，以便稍后处理更复杂的内容。

什么有效:

• 当用户通过单击按钮到达最终选项卡时，按钮的名称会完美更改。
• 当用户单击最后一个选项卡时，按钮的名称会完美更改...除非他们单击选项卡内的实际文本。单击事件仍会生成，但控制台调用 e.target.id 会抛出空字符串。

导航选项卡的代码:

             <!-- Nav tabs -->
              <ul class="nav nav-tabs" role="tablist">
                <li id="personalInfoTab" role="presentation" class="active"><a id="personalInfoLink" href="#personal-info" aria-controls="personal-info" role="tab" data-toggle="tab" class="hidden-xs"><strong>Personal Information</strong></a><a href="#personal-info" aria-controls="personal-info" role="tab" data-toggle="tab" class="visible-xs">Personal Info</a></li>
                <li id="professionalInfoTab" role="presentation"><a id="professionalInfoLink" href="#professional-info" aria-controls="professional-info" role="tab" data-toggle="tab" class="hidden-xs"><strong>Professional Information</strong></a><a href="#contact-info" aria-controls="contact-info" role="tab" data-toggle="tab" class="visible-xs">Prof. Info</a></li>
                <li id="expectationsTab" role="presentation"><a id="expectationsLink" href="#expectations" aria-controls="expectations" role="tab" data-toggle="tab" class="hidden-xs"><strong>Employment Expectations</strong></a><a id="expectationsLink" href="#expectations" aria-controls="expectations" role="tab" data-toggle="tab" class="visible-xs">Expectations</a></li>
                
                <li id="settingsTab" role="presentation"><a id="settingsLink" href="#settings" aria-controls="settings" role="tab" data-toggle="tab" class="hidden-xs"><strong>Profile Settings</strong></a><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab" class="visible-xs">Settings</a></li>
              </ul>

按钮代码:

<input type="submit" name="profile-continue" class="btn btn-danger" id="continueBtn" value="Save & Continue">

还有 Jquery:

	// Check which tab is active and set the Continue Button text	
	function initButtons() {
	
		console.log($('#settingsTab'));
		
	if ($('#settingsTab').hasClass('active')) {
		$('#continueBtn').prop( 'value' , 'Submit');
	}
	else {
		$('#continueBtn').prop( 'value' , 'Save and Continue');
	}
	};
	
	initButtons();

	/* The 'Continue' button behavior */
	$('#continueBtn').click(function(){
		// Activate the next tab
		$('.nav-tabs > .active').next('li').find('a').trigger('click');
		// Change the submit Button text accordingly
		initButtons();
		// Possible to-do: wrap in an 'if' statement that checks if there's any missing 'required' fields.
		// Possible to-do: determine 'if' the tab selected is the last in the sequence.
		// Possible to-do: grey/non-grey tabs (make accessible in sequnce).
		}
		);
	
	$( 'a[data-toggle="tab"]' ).click(function(e){
		console.log(e);
		console.log('Target: ' , e.target.id);
		// Check what tab was picked and submit Button text accordingly
		
			if ( e.target.id === 'settingsLink' ) {
				$('#continueBtn').prop( 'value' , 'Submit');
			}
			else {
				$('#continueBtn').prop( 'value' , 'Save and Continue');
			}
		
		}
		);

Answer 1

好吧，我在输入问题时就想到了这一点，但我想我仍然会在这里发帖以帮助其他可能需要它的人。选项卡文本位于“强”HTML 元素内，该元素是我尝试定位的选项卡的子。

所以我通过更改行使其工作:

if (e.target.id === 'settingsLink' ) {...

至:

if (e.target.id === 'settingsLink' || e.target.parentElement.id === 'settingsLink' ) {...

希望它可以节省一些时间。