javascript - 为什么删除图标按钮在以下情况下没有附加 ？

转载 作者：可可西里 更新时间：2023-11-01 13:10:30 24 4

我关注 <table> 的 HTML 标记

<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>
            <option value="5" >Chesse</option>
            <option value="8" >Laptop an</option>
            <option value="9" >Prosecco</option>
            <option value="10" >Coffee</option>
            <option value="11" >Tea</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 colspan="5"></td>                            
    </tr>
  </tfoot>                                           
</table>

我在单击“添加”按钮时附加控件。它工作正常。我还将删除图标附加到新添加的图标上，但它没有被分配/显示。此外，当用户单击任何相关的删除图标时 <select>应该删除。我编写了以下代码，但它不起作用。

$(function () {
    $(document).delegate('.products', 'click', function (e) {
        var table_id = $(this).closest('table').attr('id');
        var no = table_id.match(/\d+/)[0];
        var first_row = $('#' + table_id).find('tbody tr:first').attr('id');
        var toBeCloned = $('#' + first_row).find('td:first').find('select:last');
        var new_row = toBeCloned.clone();
        var idCounter = toBeCloned.attr('id').split('_');
        var new_id = 'product_id_' + no + '_' + (parseInt(idCounter[3]) + 1);
        var new_name = 'product_id_' + no + '[' + (parseInt(idCounter[3]) + 1 + ']');
        var elementToAppendTo = $('#' + table_id).find('tbody tr:first .btn-group:first');
        $(new_row).appendTo(elementToAppendTo).attr('id', new_id);
        $(new_row).appendTo(elementToAppendTo).attr('name', new_name);
        $('<button id="' + sel_id + '" style="color:#C00; opacity: 2;margin-top: 6px;" type="button" class="close delete" data-dismiss="alert" aria-hidden="true">&times;</button>').appendTo(elementToAppendTo);
        //function to delete HTML select element from add rebate by product grid 
        //$('.delete').on('click', deleteRow);
        $('.delete').on('click', function () {
            var prd_id = $(this).attr("id");
            $(this).remove();
            $("#" + prd_id).remove();
        });
    });
});

有人可以在这方面帮助我吗？此处供您引用的是我使用上述 HTML 和 jQuery 代码创建的 jsFiddle 链接:

Fiddle

最佳答案

问题是您使用了按钮 id=sel_id 并且 sel_id 未在任何地方定义。

你需要像下面这样使用id=new_id

$('<button  id="'+new_id
   +'"style="color:#C00; opacity: 2;margin-top: 6px;"'
   +' type="button" class="close delete" data-dismiss="alert"'
   +' aria-hidden="true">&times;</button>')
.appendTo($(elementToAppendTo));

请参阅JSFiddle

关于javascript - 为什么删除图标按钮在以下情况下没有附加 <select>？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23625008/

24 4 0

文章推荐： c# - 无需打开命令行窗口，直接启动 .csx (scriptcs) C# 脚本

文章推荐： php - 散列 "remember me"cookie token 的最佳方法

文章推荐： c++ - 如何从可执行文件的多重/双重代码签名中检索信息

文章推荐： php - DirectoryIterator::getExtension() 版本

• java - 在具有多个条件的 If 情况下，我们能否获得条件失败的确切位置？

  我是 Java 新手，这是我的代码， if( a.name == b.name && a.displayname == b.displayname && a.linknam

• javascript - 在下面的 JavaScript 情况下，如何避免重复自己的情况？

  在下面的场景中，我有一个 bool 值。根据结果​​，我调用完全相同的函数，唯一的区别是参数的数量。 var myBoolean = ... if (myBoolean) { retrieve

• c++ - 异常(exception)情况下，我想在没有任何堆栈展开的情况下进行调试

  我是一名研究 C++ 的 C 开发人员: 我是否正确理解如果我抛出异常然后堆栈将展开直到找到第一个异常处理程序？是否可以在不展开的情况下在任何 throw 上打开调试器(即不离开声明它的范围或任何更高

• c++ - 在什么情况/情况下 dynamic_cast<> 会失败？

  在修复庞大代码库中的错误时，我观察到一个奇怪的情况，其中引用的动态类型从原始 Derived 类型更改为 Base 类型!我提供了最少的代码来解释问题: struct Base { // some

• c# for 循环在 switch/case 情况下 - 如何？

  我正在尝试用 C# 扩展给定的代码，但由于缺乏编程经验，我有点陷入困境。 使用 Visual Studio 社区，我尝试通过控制台读出 CPU 核心温度。该代码使用开关/外壳来查找传感器的特定名称(即

• javascript - 在 AJAX 情况下，如何在目标页面评估 JavaScript？

  这可能是一个哲学问题。 假设您正在向页面发出 AJAX 请求(这是使用 Prototype): new Ajax.Request('target.asp', { method:"post", pa

• html - 在 Usemap/area 情况下，光标未更改为指针

  我有以下 HTML 代码，我无法在所有浏览器中正常工作: 我试图在移动到

• swift - 在这种 Firebase 情况下，如何在函数之间传递数据？ swift + Xcode

  我对 Swift 很陌生。我如何从 addPin 函数中检索注释并能够在我的 addLocation 操作 (buttonPressed) 中使用它。我正在尝试使用压力触摸在 map 上添加图钉，在两

• ios - 在 iPad DetailView 情况下，viewDidUnload 未被调用

  我设置了一个详细 View ，我是否有几个 Nib 文件根据在 Root View Controller 的表中选择的项目来加载。 我发现，对于 Nibs 的类，永远不会调用 viewDidUnloa

• javascript - 在这种 javascript 情况下，除了 eval 之外还有其他选择吗？

  我需要动态访问 json 文件并使用以下代码。在本例中，“bpicsel”和“temp”是变量。最终结果类似于“data[0].extit1” var title="data["+bpicsel+"]

• c# - 在 HTTPS 情况下，服务器证书未使用 HTTP.SYS 正确配置

  我需要使用第三方 WCF 服务。我已经在我的证书存储中配置了所需的证书，但是在调用 WCF 服务时出现以下异常。 向 https://XXXX.com/AHSharedServices/Custome

• postgresql - 即使在 ON CONFLICT DO NOTHING 情况下，postgres INSERT 触发器也会触发

  在几个 SO 答案(1、2)中，建议如果存在冲突则不应触发 INSERT 触发器，ON CONFLICT DO NOTHING 在触发语句中。也许我理解错了，但在我的实验中似乎并非如此。 这是我的 S

• java - 在 Hibernate3 中的 saveOrUpdateAll 情况下，具有相同标识符值的不同对象已与 session 关联

  如果进行修改，则会给出org.hibernate.NonUniqueObjectException。在我的 BidderBO 类(class)中 @Override @Transactional(pr

• javascript - 为什么 React App 的 redux 情况下 IndexOf(Object) 可以工作？

  我使用 indexOf() 方法来精细地查找数组中的对象。 直到此刻我查了一些资料，发现代码应该无法正常工作。 我在reducer中尝试了上面的代码，它成功了 let tmp = state.find

• mysql - 在指定了 ORDER BY 和 LIMIT 并且实际上只需要连接少量行的 JOIN 情况下，MySQL 的行为如何？

  假设我有以下表格: CREATE TABLE Game ( GameID INT UNSIGNED NOT NULL, GameType TINYINT UNSIGNED NOT NU

• ios - 在使用 swift ios 的某些 URL 情况下，Alamofire 进度状态显示 0.0

  代码: Alamofire.request(URL(string: imageUrl)!).downloadProgress(closure: { (progress) in

可可西里

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

• android - RelativeLayout 背景可绘制重叠内容
• android - 如何链接 cpufeatures lib 以获取 native android 库？
• java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
• java - Android 文件转字符串

滴滴打车优惠券免费领取

全站热门文章

• Serilog文档翻译系列（五）-编写日志事件
• k8sStorageClass存储类
• 线程状态转换？创建线程的几种方式？线程如何停止？
• 小白必看！入门嵌入式你需要了解这些！
• 项目实战：Qt+OSG爆破动力学仿真三维引擎测试工具v1.1.0（加载.K模型，子弹轨迹模拟动画，支持windows、linux、国产麒麟系统）
• linux操作系统和文件系统，命令（上）
• ModbusRTU通信协议报文剖析
• PasteForm最佳CRUD实践，实际案例PasteTemplate详解(一)
• SqlEs-像使用数据库一样使用Elasticsearch
• macM1,M2,M3芯片踩坑nodejsrubybrew

Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com