Question

我的网页上有很多<div class="rbt"></div>，并且这些<div>中的每一个都包含一个图标，用于删除仅<div>的图标点击。但是发生的事情是相应的<div>没有被删除，交叉按钮图像被隐藏。我已经创建了一个jsFiddle来演示我的问题，但是在jsFiddle中，图像没有被隐藏，而<div>也没有被删除。有人可以帮我这方面吗？ HTML代码是：

<div class="col-md-10 rebate_block">             
  <div class="rbt">
    <div style="overflow:auto" class="well">                 
      </br>
      <div class="table-responsive">
        <table id="blacklistgrid_1"  class="table table-bordered table-hover table-striped">
          <thead>
            <tr>
              <th style="vertical-align:middle">Products</th>
              <th style="vertical-align:middle">Pack Of</th>
              <th style="vertical-align:middle">Quantity</th>
              <th style="vertical-align:middle">Volume</th>
              <th style="vertical-align:middle">Unit</th>
              <th style="vertical-align:middle">Rebate Amount</th>
            </tr>
          </thead>

          <tbody class="apnd-test">
            <tr id="reb1_1">
              <td>
                <div class="btn-group">
                  <select name="product_id_1[1]" id="product_id_1_1" class="form-control prod_list">
                    <option value=""  selected='selected'>Select Product</option>
                  </select>
                </div>
              </td>
              <td>
                <input type="text" name="pack[1]" id="pack_1" value="" class="form-control" size="8"/>
              </td>
              <td>
                <input type="text" name="quantity[1]" id="quantity_1" value="" class="form-control" size="8"/>
              </td>
              <td>
                <input type="text" name="volume[1]" id="volume_1" value="" class="form-control" size="8"/>
              </td>
              <td>
                <div class="btn-group">
                  <select name="units[1]" id="units_1" class="form-control">
                    <option value="" selected='selected'>Select Unit</option>
                    <option value="5" >Microsecond</option>       
                    <option value="7" >oz</option>       
                    <option value="9" >ml</option>       
                    <option value="10" >L</option>       
                    <option value="12" >gms</option>
                  </select>
                </div>
              </td>
              <td>
                <input type="text" name="amount[1]" id="amount_1" value="" class="form-control" size="9"/>
              </td>
            </tr>
          </tbody>
        <tfoot>

        <tr id="reb1_2">
          <td>
            <button style="float:right; margin-bottom: 20px" class="products" type="button" class="btn btn-default" onclick="">&nbsp;Add</button>
          </td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tfoot>                                           
  </table>                  
</div>                                
<div class="row">
  <div class="col-xs-6">
    <label for="name" class="col-lg-5">Rebate Start Date<span style="color:#FF0000">*</span></label>
    <div class="col-lg-6">
      <input class="form-control date_control" placeholder="yyyy-mm-dd" type="date" name="rebate_start_date[1]" id="rebate_start_date_1" value="">
    </div>
  </div>
  <div class="col-xs-6">
    <label for="name" class="col-lg-6">Rebate Expiry Date<span style="color:#FF0000">*</span></label>
    <div class="col-lg-6">
      <input class="form-control date_control" placeholder="yyyy-mm-dd" type="date" name="rebate_expiry_date[1]" id="rebate_expiry_date_1" value="">
    </div>
  </div> 
</div>
</br>
<div class="row">
  <div class="col-xs-6">
    <label for="name" class="col-lg-5">Applicable States</label>
    <div class="col-lg-7">
      <select class="states" multiple="multiple" name="applicable_states[1][]" id="applicable_states_1">
        <option value="1">Alabama</option>
        <option value="2">Alaska</option>
        // ... other states as options
        <option value="49">Wisconsin</option>
        <option value="50">Wyoming</option>                                          
      </select>                          
    </div>
  </div>
  <div class="col-xs-6">
    <label for="name" class="col-lg-6">Rebate Total Count</label>
      <div class="col-lg-6">
        <input type="text" class="form-control" name="rebate_total_count[1]" id="rebate_total_count_1" value="">
      </div>
    </div> 
  </div>
  <div style="float: clear;"></div>
  <div class="row">
    <div class="col-xs-5"></div>
    <div class="col-xs-2"></div>
    <div align="right" class="col-xs-5">
      <button style='color:#C00; opacity: 2;margin-right: -12px;' type='button' class='close del_reb' data-dismiss='alert' aria-hidden='true'>&times;</button>
    </div>                
  </div>
  </div> <!-- /span8 --></div>
</div>

jQuery代码是：

$(function () {
  //function to delete rebate entry(i.e. entire rebate block) in add rebate by product   
  $(document).delegate('.del_reb','click',function (event) {   
    $(this).parents('.rbt').remove(); 
    event.preventDefault();
  });
});

js Fiddle link

Answer 1

它的发生是因为你没有在你的小提琴中附加任何jquery库。只需从下拉列表中附加任何jquery库并再试一次

enter image description here

演示： - http://jsfiddle.net/3Fkf3/6/

$(function () {
  //function to delete rebate entry(i.e. entire rebate block) in add rebate by product   
  $(document).delegate('.del_reb','click',function (event) {   
    $(this).parents('.rbt').remove(); 
    event.preventDefault();
  });
});

根据您的评论，您使用的是jquery 1.9，所以我请求您查看： - 正如官方jquery网站http://api.jquery.com/delegate/

所建议的那样

从jQuery 1.7开始，.delegate（）已被.on（）方法取代。   然而，对于早期版本，它仍然是最有效的手段   使用事件委托。有关事件绑定和委派的更多信息   在.on（）方法中。通常，这些是等效的模板   对于这两种方法：

// jQuery 1.4.3 +

$（elements）.delegate（selector，events，data，handler）;

// jQuery 1.7 +

$（elements）.on（events，selector，data，handler）;

单击图像后为什么不删除<div>以及为什么在下列情况下删除图像？</div>

1 个答案: