文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >使用jquery ajax刷新后选择价格标签

问使用jquery ajax刷新后选择价格标签
EN

Stack Overflow用户
提问于 2018-08-15 19:25:03
回答 1查看 37关注 0票数 0

我的代码有一个问题。当我的价格标签是空的，我可以选择(或选择一个)与css突出显示。但是当我用jQuery和ajax刷新价格标签时，选择样式就不再起作用了。

当它为空时

下面是我的html代码：

​

代码语言：javascript
复制
$('#subcategories').on('change',function(){
    $.post('../inc/ajaxData.php',
        {subcat_id:$('#subcategories').val()},
        function(res){
            $('#price-tab').html(res);
    });
});
    
$('#pack-1').on('click', function(){

    $('#pack-1').addClass('pack-selected');
    $('#pack-2').removeClass('pack-selected');
    $('#pack-3').removeClass('pack-selected');
});

$('#pack-2').on('click', function(){

    $('#pack-2').addClass('pack-selected');
    $('#pack-1').removeClass('pack-selected');
    $('#pack-3').removeClass('pack-selected');
});

$('#pack-3').on('click', function(){

    $('#pack-3').addClass('pack-selected');
    $('#pack-1').removeClass('pack-selected');
    $('#pack-2').removeClass('pack-selected');
});
代码语言：javascript
复制
<!-- PHP Begins : ajaxData.php -->

if(!empty($_POST['subcat_id'])){
    
    $subcat_id = $_POST['subcat_id'];
    
    $pack_query = "SELECT * FROM package WHERE id_sub = ".$subcat_id."";
    $pack_connexion = mysqli_query($connexion, $pack_query);
    if (!$pack_connexion){

        die("Défaut de connexion.". mysqli_error($connexion));                    
    } else {
        
        $row = mysqli_fetch_array($pack_connexion);
        $_SESSION['pack_id'] = $row['pack_id'];
        $_SESSION['pack_name'] = $row['pack_name'];
        $_SESSION['pack_price'] = $row['pack_price'];
        $_SESSION['pack_option'] = $row['pack_option'];
        $_SESSION['pack_icon'] = $row['pack_icon'];
    ?>    
        <div class="form-group">
        <!-- col-md-4 pricing-table-block -->
        <div class="col-md-4 pricing-table-block">
        <!-- pricing-table-item -->
            <div class="pricing-table-item"  id="pack-a">

                <!-- pricing-table-title -->
                <div class="pricing-table-title">

                    <!-- pricing-table-icon -->
                    <div class="pricing-table-icon">
                        <i class="<?php echo $_SESSION['pack_icon']; ?>" style="color: #cd7f32;"></i>
                    </div><!-- /pricing-table-icon -->

                    <h3><?php echo $_SESSION['pack_name']; ?> </h3>

                </div><!-- /pricing-table-title -->

                <!-- pricing-table-price -->
                <div class="pricing-table-price">
                    <div><span class="pricing-table-value"><?php echo $_SESSION['pack_price']; ?><span class="pricing-table-sign">CAD</span></span></div>
                </div><!-- /pricing-table-price --> 

                <!-- pricing-table-features --> 
                <div class="pricing-table-features">

                    <ul>
                        <?php echo $_SESSION['pack_option']; ?>
                    </ul>

                </div><!-- /pricing-table-features -->

                <!--pricing-table-button--> 
                <div class="pricing-table-button">
                    <p title="" class="">* Projet ouvert au candidat pendant 7 jours</p>
                    <p title="" class="">* À réaliser en 21 jours max.</p>
                </div> 
                <!--/pricing-table-button--> 


            </div><!-- /pricing-table-item -->
        </div><!-- /col-md-4 pricing-table-block -->

        <!-- col-md-4 pricing-table-block -->
        <div class="col-md-4 pricing-table-block" >
            <!-- pricing-table-item -->
            <div class="pricing-table-item" id="pack-b"> 
            <?php 
                $row = mysqli_fetch_array($pack_connexion);           
                $_SESSION['pack_id'] = $row['pack_id'];
                $_SESSION['pack_name'] = $row['pack_name'];
                $_SESSION['pack_price'] = $row['pack_price'];
                $_SESSION['pack_option'] = $row['pack_option']; 
                $_SESSION['pack_icon'] = $row['pack_icon']; 
            ?>

                <!-- pricing-table-ribbon-wrapper -->
                <div class="pricing-table-ribbon-wrapper">
                    <div class="pricing-table-ribbon">Meilleur choix</div>
                </div><!-- /pricing-table-ribbon-wrapper -->

                <!-- pricing-table-title -->
                <div class="pricing-table-title">

                    <!-- pricing-table-icon -->
                    <div class="pricing-table-icon">
                        <i class="<?php echo $_SESSION['pack_icon']; ?>" style="color: #C0C0C0;"></i>
                    </div><!-- /pricing-table-icon --> 

                    <h3><?php echo $_SESSION['pack_name']?></h3>

                </div><!-- /pricing-table-title -->


                <!-- pricing-table-price -->
                <div class="pricing-table-price">
                    <div><span class="pricing-table-value"><?php echo $_SESSION['pack_price']; ?><span class="pricing-table-sign">CAD</span></span></div>
                </div><!-- /pricing-table-price  -->


                 <!-- pricing-table-features --> 
                <div class="pricing-table-features">

                    <ul>
                        <?php echo $_SESSION['pack_option']; ?>
                    </ul>

                </div><!-- /pricing-table-features --> 

             <!--pricing-table-button--> 
                <div class="pricing-table-button">
                    <p title="" class="">* Projet ouvert au candidat pendant 7 jours</p>
                    <p title="" class="">* À réaliser en 41 jours max.</p>
                </div> 
                 <!--/pricing-table-button--> 


            </div><!-- /pricing-table-item -->
        </div><!-- /col-md-4 pricing-table-block -->


        <!-- col-md-4 pricing-table-block -->
        <div class="col-md-4 pricing-table-block">
            <!-- pricing-table-item -->
            <div class="pricing-table-item" id="pack-c"> 
            <?php 
                $row = mysqli_fetch_array($pack_connexion);           
                $_SESSION['pack_id'] = $row['pack_id'];
                $_SESSION['pack_name'] = $row['pack_name'];
                $_SESSION['pack_price'] = $row['pack_price'];
                $_SESSION['pack_option'] = $row['pack_option'];
            ?>

                <!-- pricing-table-title -->
                <div class="pricing-table-title">

                    <!-- pricing-table-icon -->
                    <div class="pricing-table-icon">
                        <i class="<?php echo $_SESSION['pack_icon']; ?>" style="color: #ffd700;"></i>
                    </div><!-- /pricing-table-icon --> 
                    
                    <h3><?php echo $_SESSION['pack_name']; ?></h3>

                </div><!-- /pricing-table-title -->

                <!-- pricing-table-price -->
                <div class="pricing-table-price">
                    <div><span class="pricing-table-value"><?php echo $_SESSION['pack_price']; ?><span class="pricing-table-sign">CAD</span></span></div>
                </div><!-- /pricing-table-price  -->

                 <!--pricing-table-features--> 
                <div class="pricing-table-features">

                    <ul>
                        <?php echo $_SESSION['pack_option']; ?>
                    </ul>

                </div><!--/pricing-table-features--> 

                <!--pricing-table-button--> 
                <div class="pricing-table-button">
                    <p title="" class="">* Projet ouvert au candidat pendant 7 jours</p>
                    <p title="" class="">* À réaliser en 51 jours max.</p>
                </div> 
                 <!--/pricing-table-button--> 

            </div><!-- /pricing-table-item -->
        </div><!-- /col-md-4 pricing-table-block -->
        </div> 

        
 <?php        
    }
}
?>



<!-- HTML Begins -->

<div class="row" id="price-tab">
  <div class="form-group">
    <!-- col-md-4 pricing-table-block -->
    <div class="col-md-4 pricing-table-block">
      <!-- pricing-table-item -->
      <div class="pricing-table-item" id="pack-1">

        <!-- pricing-table-title -->
        <div class="pricing-table-title">

          <!-- pricing-table-icon -->
          <div class="pricing-table-icon">
            <i class="far fa-file-code" style="color: #cd7f32;"></i>
          </div>
          <!-- /pricing-table-icon -->

          <h3>-</h3>

        </div>
        <!-- /pricing-table-title -->

        <!-- pricing-table-price -->
        <div class="pricing-table-price">
          <div><span class="pricing-table-value">-<span class="pricing-table-sign">CAD</span></span>
          </div>
        </div>
        <!-- /pricing-table-price -->

        <!-- pricing-table-features -->
        <div class="pricing-table-features">

          <ul>
            -
          </ul>

        </div>
        <!-- /pricing-table-features -->

        <!--pricing-table-button-->
        <div class="pricing-table-button">
          <p title="" class="">* Projet ouvert au candidat pendant 7 jours</p>
          <p title="" class="">* À réaliser en 21 jours max.</p>
        </div>
        <!--/pricing-table-button-->


      </div>
      <!-- /pricing-table-item -->
    </div>
    <!-- /col-md-4 pricing-table-block -->

    <!-- col-md-4 pricing-table-block -->
    <div class="col-md-4 pricing-table-block">
      <!-- pricing-table-item -->
      <div class="pricing-table-item" id="pack-2">

        <!-- pricing-table-ribbon-wrapper -->
        <div class="pricing-table-ribbon-wrapper">
          <div class="pricing-table-ribbon">Meilleur choix</div>
        </div>
        <!-- /pricing-table-ribbon-wrapper -->

        <!-- pricing-table-title -->
        <div class="pricing-table-title">

          <!-- pricing-table-icon -->
          <div class="pricing-table-icon">
            <i class="far fa-file-code" style="color: #C0C0C0;"></i>
          </div>
          <!-- /pricing-table-icon -->


          <h3>-</h3>

        </div>
        <!-- /pricing-table-title -->


        <!-- pricing-table-price -->
        <div class="pricing-table-price">
          <div><span class="pricing-table-value">-<span class="pricing-table-sign">CAD</span></span>
          </div>
        </div>
        <!-- /pricing-table-price  -->


        <!-- pricing-table-features -->
        <div class="pricing-table-features">

          <ul>
            -
          </ul>

        </div>
        <!-- /pricing-table-features -->

        <!--pricing-table-button-->
        <div class="pricing-table-button">
          <p title="" class="">* Projet ouvert au candidat pendant 7 jours</p>
          <p title="" class="">* À réaliser en 41 jours max.</p>
        </div>
        <!--/pricing-table-button-->


      </div>
      <!-- /pricing-table-item -->
    </div>
    <!-- /col-md-4 pricing-table-block -->


    <!-- col-md-4 pricing-table-block -->
    <div class="col-md-4 pricing-table-block">
      <!-- pricing-table-item -->
      <div class="pricing-table-item" id="pack-3">


        <!-- pricing-table-title -->
        <div class="pricing-table-title">

          <!-- pricing-table-icon -->
          <div class="pricing-table-icon">
            <i class="far fa-file-code" style="color: #ffd700;"></i>
          </div>
          <!-- /pricing-table-icon -->

          <h3>-</h3>

        </div>
        <!-- /pricing-table-title -->


        <!-- pricing-table-price -->
        <div class="pricing-table-price">
          <div><span class="pricing-table-value">-<span class="pricing-table-sign">CAD</span></span>
          </div>
        </div>
        <!-- /pricing-table-price  -->


        <!--pricing-table-features-->
        <div class="pricing-table-features">

          <ul>
            -
          </ul>

        </div>
        <!--/pricing-table-features-->

        <!--pricing-table-button-->
        <div class="pricing-table-button">
          <p title="" class="">* Projet ouvert au candidat pendant 7 jours</p>
          <p title="" class="">* À réaliser en 51 jours max.</p>
        </div>
        <!--/pricing-table-button-->


      </div>
      <!-- /pricing-table-item -->
    </div>
    <!-- /col-md-4 pricing-table-block -->
  </div>
</div>

​

有很多代码，但我只想让你了解更多的细节

php
jquery
html
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-15 19:56:30

当您使用$('#pack-1').click()注册事件处理程序时，它只将处理程序添加到执行代码时存在于DOM中的那些元素中。

使用基于委托的事件处理程序，如：

代码语言：javascript
复制
$(document).on('click', '#pack-1', function(){
        $('#pack-1').addClass('pack-selected');
        $('#pack-2').removeClass('pack-selected');
        $('#pack-3').removeClass('pack-selected');
    });
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/51857779

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档