在由.html()添加的元素上，JavaScript不能正常工作
在由.html()添加的元素上，JavaScript不能正常工作
提问于 2018-07-06 05:29:36
我的JavaScript和jQuery fadeIn()，html()和fadeOut()方法出了点小问题。
下面是我的代码。
我的HTML
<div class="fluid-container">
<div class="row">
<div class="col text-center">
<ul class="list-inline pb-6 border-bottom d-inline-block w-75">
<button class="list-inline-item circle-button mr-3" type="button" name="button">1</button>
<li class="list-inline-item mr-5">Password</li>
<button class="list-inline-item circle-button mr-3 grey-btn" type="button" name="button">2</button>
<li class="list-inline-item half-opacity">Industries</li>
</ul>
<br>
<div id="ReplCont">
<span class="h5 d-inline-block mt-4 mb-5">Hey there Maxx, welcome to Flairr!<br>To get started, create a password for yourself.</span>
<br>
<input class="mb-6 ml-5 mr-3 rounded w-20" type="text" name="password" value="" placeholder="Password" id="pass-input">
<img class="flairr-tick-resize vis-hidden" src="./img/flairr_tick.svg" alt="Tick images">
<br>
<input class="mb-5 ml-5 mr-3 rounded w-20" type="text" name="confirm password" value="" placeholder="Confirm Password" id="conf-pass-input">
<img class="flairr-tick-resize vis-hidden" src="./img/flairr_tick.svg" alt="Tick images">
<br>
<button class="mb-2 half-opacity" type="button" name="button" id="cont-btn">Continue</button>
</div>
<div id="empty-bg">
<!-- Must be empty -->
</div>
</div>
</div>
</div>JAVASCRIPT
$(document).ready(function(){
// INDUSTIES BUTTONS
// Toggle active
$('.industry-btn-new').click(function(){
if ($('.industry-btn-chsen').length >= 3) {
if ($(this).hasClass('industry-btn-chsen')) {
$(this).toggleClass('industry-btn-chsen');
}
}else {
$(this).toggleClass('industry-btn-chsen');
}
})
// Get started button
$('.industry-btn-new').click(function(){
if ($('.industry-btn-chsen').length >= 3) {
$('#get-started').removeClass('half-opacity');
}else if ($('.industry-btn-chsen').length <= 3) {
$('#get-started').addClass('half-opacity');
}
})
// INPUTS COMPARISON
$('#conf-pass-input, #pass-input').keyup(function(){
if ($('#pass-input').val() === $('#conf-pass-input').val() && $('.w-20').val().length >= 1) {
$('.flairr-tick-resize').removeClass('vis-hidden');
$('#cont-btn').removeClass('half-opacity');
$('.w-20').removeClass('red-input');
}else if ($('#pass-input').val() !== $('#conf-pass-input').val() || $('.w-20').val().length <= 1) {
$('.flairr-tick-resize').addClass('vis-hidden');
$('#cont-btn').addClass('half-opacity');
$('.w-20').removeClass('red-input');
}
});
// CONTINUE BUTTON ACTIONS
$('#cont-btn').click(function(){
if ($('#pass-input').val() !== $('#conf-pass-input').val() || $('.w-20').val().length <= 0) {
$('.w-20').addClass('red-input');
}else {
$('#ReplCont').fadeOut('slow', function() {
$('#ReplCont').html(`<span class="h5 d-inline-block mt-4 mb-5">Alright Maxx,<br>choose up to 3 industries you're interested in.</span>
<br>
<button class="m-2 industry-btn-new" type="button" name="button">Marketing</button>
<button class="m-2 industry-btn-new" type="button" name="button">Finance</button>
<button class="m-2 industry-btn-new" type="button" name="button">Business Development</button>
<button class="m-2 industry-btn-new" type="button" name="button">Engineering</button>
<br>
<div class="pb-5 mb-4 border-bottom w-75 text=center mx-auto">
<button class="m-2 industry-btn-new" type="button" name="button">Design</button>
<button class="m-2 industry-btn-new" type="button" name="button">Computer Science</button>
<button class="m-2 industry-btn-new" type="button" name="button">Data Science</button>
</div>
<br>
<button class="mb-2 half-opacity" type="button" name="button" id="get-started">Get started</button>`);
$('#ReplCont').fadeIn('slow');
});
}
})
})当单击continue按钮时，我用ID ReplCont替换了DIV中的内容。问题是，在替换ReplCont DIV中的内容后，我的JS中的新内容不起作用。但是，如果我手动放置它，然后刷新页面，那么JS就可以正常工作。
我有一些想法。也许JS会在页面加载时加载，在使用jQuery设置新的超文本标记语言后，我必须以某种方式重新加载JS。但我不确定。请帮助朋友们！
提前谢谢你！
回答 1
Stack Overflow用户
发布于 2018-07-06 05:41:52
当JavaScript将超文本标记语言添加到DOM中时，它会影响对它的引用。这意味着你的JavaScript正在搜索“旧的”超文本标记语言，而不是“新的”。
你想要的是改变你的点击事件，让它像这样“直播”。
$(document).on(event, element, function(){
// Do stuff
});event可以是click、submit等
element将是您的元素(id或类等)的选择器
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51200152
复制相关文章
相似问题