javascript - 刷新 div 时所有功能均不起作用

Question

我的页面布局有两个主要 div。一个在左边，另一个在右边。我尝试通过ajax提交表单后仅重新加载左侧的DIV。

$(".left-content").load('left.php');    

left.php 包含左侧 DIV 的 HTML。刷新后，它确实加载了 html，并且 div 看起来不错但不起作用。任何 jQuery 函数或 anchor 链接都不起作用。

所以我尝试了以下方法:

以前是:

$("#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&nbsp;<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>

左.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&nbsp;<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-->

Answer 1

每次加载新内容时，您都需要再次连接 jQuery 事件处理程序。

JavaScript 事件类似于您在特定实例或元素上订阅的函数回调。

当您加载新内容时，您实际上会销毁之前包含在 div 中的元素，并创建一堆新元素。这些新元素可能与被破坏的元素具有相同的名称和 ID，但它们是 DOM 中的全新元素。您必须建立新的事件处理程序，因为您之前创建的事件处理程序已附加到不再存在的对象。