我的页面布局有两个主要的div。一个在左边，另一个在右边。在通过ajax提交表单后，我尝试仅重新加载左侧的DIV。
$(".left-content").load('left.php');
left.php包含左侧DIV的HTML。刷新后，它会加载html并且div看起来很好但不起作用。任何jQuery函数或锚链接都不起作用。
所以我尝试了以下内容：
以前是：
$("#slider").mousemove( function(e){
$("#valBox").html($(this).val());
});
现在添加，以检测新添加的DOM元素：
$('body').on('mousemove', '#slider', function() {
$("#valBox").html($(this).val());
});
以前是，弹出框：
<a href="#browse-search-popup" class="browse-search-popup-link"><span id="searchLink" style='color:#fff;text-decoration:underline;font-weight:bold !important;' class='text-center'>browse courses</span></a>
现在添加，用于新添加的DOM元素
if(window.location.href.indexOf("#browse-search-popup") != -1)
{
$('.browse-search-popup-link').click();
}
有人可以解释在没有功能正常工作的情况下发生这种情况的可能性。可能重复ID吗？但是，如果重新加载DIV，则不会使用指定'left.php'的内容替换，因为没有机会发生重复ID？
母版页（左内容）div
<div class="small-12 medium-12 large-12 left-content hide-for-small hide-for-medium columns">
<div class="small-6 medium-6 large-8 columns titleBox hide-for-small hide-for-medium">
<p>Find Tutors</p>
</div>
<br/><br/><br/><br/>
<form name="form" id="search_tutor" method="post" action="#" class="hide-for-small">
<!-- class => which item to select in autocomplete eg: class="1"-->
<input id="subject" type="text" name="subject" value="" placeholder="Subject" class="1 text-center"/ style="width:200px;margin:0 auto;" required>
<input type="hidden" name="try" value="" />
<div class="small-12 medium-12 large-12 text-center columns" style="padding:10px 0;">
<span id="searchLink">or </span><a href="#browse-search-popup" class="browse-search-popup-link"><span id="searchLink" style='color:#fff;text-decoration:underline;font-weight:bold !important;' class='text-center'>browse courses</span></a>
</div>
<!-- <div class="ui-widget2">-->
<input id="location_input" type="text" name="location" value="" placeholder="Location" class="0 text-center" style="width:200px;margin:0 auto;" required>
<input type="hidden" name="lat" value="" />
<input type="hidden" name="lon" value="" />
<br/><br/>
<div class="small-12 medium-12 large-12 text-center columns">
<input name="rate" type="range" min="10" max="300" step="10" value="100" id="slider"/>
</div>
<br/><br/>
<div class="text-center">Within <span>RM</span><span id="valBox">100</span></div><br/>
<div class="small-12 medium-12 large-12 text-center columns">
<input name="distance" type="range" min="5" max="300" step="5" value="40" id="slider2"/><br/><br/>
</div>
<div class="text-center">Within <span id="valBox2">40</span><span>km</span></div><br/>
<div class="small-12 medium-12 large-9 large-centered text-center columns">
<a href="#more-popup" class="more-popup-link"><div class="moreBox">More Options <img src="<?php echo $path;?>/img/nav-icon.png" style="width:25px;"></div></a>
</div>
<!--more option starts-->
<div id="div1"></div><!-- style="height:100px;display:none;"-->
<div id="div2"></div>
<div id="div3"></div>
<!--<div id="capturePers">
</div>
<div id="captureTuit">
</div>
<div id="captureAvail2">
</div>-->
<!--more option ends-->
<div class="text-center">
<input type="submit" class="text-center"name="submit" value="Search" id="search"></div><br/>
</form>
</div>
left.php
<div class="small-6 medium-6 large-8 columns titleBox hide-for-small hide-for-medium">
<p>Find Tutors</p>
</div>
<br/><br/><br/><br/>
<form name="form" id="search_tutor" method="post" action="#" class="hide-for-small">
<!-- class => which item to select in autocomplete eg: class="1"-->
<input id="subject" type="text" name="subject" value="" placeholder="Subject" class="1 text-center"/ style="width:200px;margin:0 auto;" required>
<input type="hidden" name="try" value="" />
<div class="small-12 medium-12 large-12 text-center columns" style="padding:10px 0;">
<span id="searchLink">or </span><a href="#browse-search-popup" class="browse-search-popup-link"><span id="searchLink" style='color:#fff;text-decoration:underline;font-weight:bold !important;' class='text-center'>browse courses</span></a>
</div>
<!-- <div class="ui-widget2">-->
<input id="location_input" type="text" name="location" value="" placeholder="Location" class="0 text-center" style="width:200px;margin:0 auto;" required>
<input type="hidden" name="lat" value="" />
<input type="hidden" name="lon" value="" />
<br/><br/>
<div class="small-12 medium-12 large-12 text-center columns">
<input name="rate" type="range" min="10" max="300" step="10" value="100" id="slider"/>
</div>
<br/><br/>
<div class="text-center">Within <span>RM</span><span id="valBox">100</span></div><br/>
<div class="small-12 medium-12 large-12 text-center columns">
<input name="distance" type="range" min="5" max="300" step="5" value="40" id="slider2"/><br/><br/>
</div>
<div class="text-center">Within <span id="valBox2">40</span><span>km</span></div><br/>
<div class="small-12 medium-12 large-9 large-centered text-center columns">
<a href="#more-popup" class="more-popup-link"><div class="moreBox">More Options <img src="<?php echo $path;?>/img/nav-icon.png" style="width:25px;"></div></a>
</div>
<!--more option starts-->
<div id="div1"></div><!-- style="height:100px;display:none;"-->
<div id="div2"></div>
<div id="div3"></div>
<!--<div id="capturePers">
</div>
<div id="captureTuit">
</div>
<div id="captureAvail2">
</div>-->
<!--more option ends-->
<div class="text-center">
<input type="submit" class="text-center"name="submit" value="Search" id="search"></div><br/>
</form>
</div>
</div><!--end row-->
答案 0 :(得分：1)
每次加载新内容时，都需要再次连接jQuery事件处理程序。
javascript事件就像您在特定实例或元素上订阅的函数回调。
当您加载新内容时，基本上会破坏先前包含在div中的元素，并创建一堆新元素。这些新的可能与被破坏的名称和id相同，但它们是DOM中的全新元素。您必须建立新的事件处理程序，因为您先前创建的事件处理程序已附加到不再存在的对象。