javascript - 从jquery中动态生成的下拉按钮获取值-6ren

javascript - 从jquery中动态生成的下拉按钮获取值

转载作者：行者123 更新时间：2023-11-30 14:35:34

我是一个简单的类别表单，由一个按钮 Choose the Item 组成，它的作用类似于下拉组件。最初，内容表单是静态 html，当用户点击 Add Content 时，会动态添加/复制另一个内容表单。

有一个名为Choose the Item, 的按钮，单击该按钮后，会出现一个下拉列表，显示值，用户选择一个值，按钮名称会更改为所选的值。

在此示例中，由于缺少 Bootstrap 库，外观和感觉不一样。

我遇到的问题是，点击事件不适用于第二个动态生成的内容。也就是说，当我添加其他内容时，我无法单击按钮 Choose the Item。有人可以帮我解决这个问题吗？

var count = 1;

$('.js-add').click(function() {
	count++;
  var content = `        
   
                <div class="form-control-group">
            <h3>Content No. `+count+`</h3>

            <div class="form-control">
                <label for="volume">Item</label>

                <button type="button" id="volume-menu`+count+`" class="mdl-button js-custom-select mdl-js-button mdl-button--raised mdl-js-ripple-effect">
                    Choose the item
                </button>

                <ul class="mdl-menu mdl-js-menu" for="volume-menu`+count+`">
                    <li class="mdl-menu__item" data-value="10">10</li>
                    <li class="mdl-menu__item" data-value="20">20</li>
                    <li class="mdl-menu__item" data-value="30">30</li>
                </ul>

            </div>
        </div>
        
        
        <br>`
        
       $('.main').append(content);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<title>Page Title</title>
</head>
<body>

<div class="btn btn-success js-add">
Add Content
</div> 

<div class="main">


        <div class="form-control-group">
            <h3>Content No. 1</h3>

            <div class="form-control">
                <label for="volume">Item</label>

                <button type="button" id="volume-menu" class="mdl-button js-custom-select mdl-js-button mdl-button--raised mdl-js-ripple-effect">
                    Choose the item
                </button>

                <ul class="mdl-menu mdl-js-menu" for="volume-menu">
                    <li class="mdl-menu__item" data-value="10">10</li>
                    <li class="mdl-menu__item" data-value="20">20</li>
                    <li class="mdl-menu__item" data-value="30">30</li>
                </ul>
            </div>
        </div>
        
        
        <br>

        
        
        </div>
        
        

</body>

最佳答案

There is a button called Choose User that when clicked, it gives a drop down list, showing the values and the user selects a value, the button name changes to that value selected.

添加这部分代码

$(document.body).on("click", "li.mdl-menu__item", function() {
  $(this).parent().prev().text($(this).text());
  $(this).parent().toggleClass('hidden');
});

the click event is not working on the second generated dynamically content. That, is I am unable to click the button Choose User when I add another category.

这种类型的事件定义解决了这个问题并且您使用了它。您的代码运行良好，我没有遇到这个问题。

$(document.body).on("click", "button.js-user-select", function() {
  $(this).next().toggleClass('hidden');
});

我认为这对你有帮助

$(document.body).on("click", "button.js-user-select", function() {
  $(this).next().toggleClass('hidden');
});

$(document.body).on("click", "li.mdl-menu__item", function() {
  $(this).parent().prev().text($(this).text());
  $(this).parent().toggleClass('hidden');
});

var count = 1;

$(".add-other").click(function() {
  count++;
  var content =
    `<div class="form-control-grp">
                <h3>Category ` +
    count +
    `</h3>

                <div class="form-control">
                    <label for="volume">Type of User</label>

                    <button type="button" id="user-list" class="mdl-button js-user-select mdl-js-button mdl-button--raised mdl-js-ripple-effect">
                        Choose user
                    </button>

                    <ul class="mdl-menu mdl-js-user hidden" for="user-list">
                        <li class="mdl-menu__item" data-value="10">User Specialist</li>
                        <li class="mdl-menu__item" data-value="20">User Moderator</li>
                       
                    </ul>

                    <input type="hidden" id="user" name="user">
                </div>
    </div>`;

  $(".main").append(content);
});

.hidden {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" class="add-other">Add Category </button>

<div class="main">

  <div class="form-control-grp">
    <h3>Category 1</h3>

    <div class="form-control">
      <label for="volume">Type of User</label>

      <button type="button" id="user-list" class="mdl-button js-user-select mdl-js-button mdl-button--raised mdl-js-ripple-effect">
                        Choose user
                    </button>

      <ul class="mdl-menu mdl-js-user hidden" for="user-list">
        <li class="mdl-menu__item" data-value="10">User Specialist</li>
        <li class="mdl-menu__item" data-value="20">User Moderator</li>

      </ul>

      <input type="hidden" id="user" name="user">
    </div>
  </div>

更新

1- 添加这个用于更新dom

componentHandler.upgradeDom();

2- 为按钮文本添加这个

$(document).on("click", "li.mdl-menu__item", function() {
  $(this).parent().parent().prev().text($(this).text());
});

3- 使用 ${count} 而不是您的用法使 id 动态化。

var count = 1;

$(document).on("click", "li.mdl-menu__item", function() {
  $(this).parent().parent().prev().text($(this).text());
});

$('.js-add').click(function() {
  count++;
  var content = `        
                <div class="form-control-group">
            <h3>Content No. ${count}</h3>

            <div class="form-control">
                <label for="volume">Item</label>

                <button type="button" id="volume-menu-${count}" class="mdl-button js-custom-select mdl-js-button mdl-button--raised mdl-js-ripple-effect">
                    Choose the item
                </button>

                <ul class="mdl-menu mdl-js-menu" for="volume-menu-${count}">
                    <li class="mdl-menu__item" data-value="10">10</li>
                    <li class="mdl-menu__item" data-value="20">20</li>
                    <li class="mdl-menu__item" data-value="30">30</li>
                </ul>

            </div>
        </div>
        
        
        <br>`

  $('.main').append(content);
  componentHandler.upgradeDom();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<title>Page Title</title>
</head>

<body>

  <div class="btn btn-success js-add">
    Add Content
  </div>

  <div class="main">

    <div class="form-control-group">
      <h3>Content No. 1</h3>

      <div class="form-control">
        <label for="volume">Item</label>

        <button type="button" id="volume-menu-1" class="mdl-button js-custom-select mdl-js-button mdl-button--raised mdl-js-ripple-effect">
                    Choose the item
                </button>

        <ul class="mdl-menu mdl-js-menu" for="volume-menu-1">
          <li class="mdl-menu__item" data-value="10">10</li>
          <li class="mdl-menu__item" data-value="20">20</li>
          <li class="mdl-menu__item" data-value="30">30</li>
        </ul>
      </div>
    </div>

    <br>

  </div>

</body>

关于javascript - 从jquery中动态生成的下拉按钮获取值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50480678/

文章推荐： c - 初始化数组时 C 中的段错误

文章推荐： javascript - 在 Google AppMaker 中发送电子邮件时出错

文章推荐： javascript - 是否可以将 JQuery attr 绑定(bind)到 js 变量？

文章推荐： javascript - 不是 googlemaps api javascript 中的函数错误

tomcat - 无法使用 JDK6 生成 keystore ，但可以使用 JDK5 生成
我正在尝试使用以下 keytool 命令为我的应用程序生成 keystore : keytool -genkey -alias tomcat -keystore tomcat.keystore -ke
javascript - D3.js:生成 X 轴会删除我的一些点的标签，生成 Y 轴会将它们全部删除
编辑:在西里尔正确解决问题后，我注意到只需将生成轴的函数放在用于生成标签的函数下面就可以解决问题。我几乎读完了 O'Reilly 书中关于 D3.js 的教程，并在倒数第二页上制作了散点图，但是当添
graphql - 从 Schema 生成 GraphQL GUI 和从 GUI 生成 Schema
虽然使用 GraphiQL 效果很好，但我的老板要求我实现一个用户界面，用户可以在其中通过 UI 元素(例如复选框、映射关系)检查呈现给他们的元素并获取数据，这样做将为该人生成 graphql 输入，
java - 如何删除 Netbean 6.8 中的生成源(jax-ws)？我应该根据网站地址从 WSDL 生成 WS 客户端还是从 api 生成 WS 客户端？
我尝试在 Netbean 6.8 中使用 ws-import 生成 Java 类。我想重新生成 jax-ws，因为在 ebay.api.paypalapi 包中发现了一个错误(我认为该错误是由于 Pa
生成 Perl 日期时间？
我有一个 perl 脚本，它获取系统日期并将该日期写入文件名。系统日期被分配给 TRH1 变量，然后它被设置为一个文件名。 $TRH1 =`date + %Y%m%d%H%M`; print "TR
Haskell UUID 生成
我是 Haskell 的新手，需要帮助。我正在尝试构建一种必须具有某种唯一性的新数据类型，因此我决定使用 UUID 作为唯一标识符: data MyType = MyType { uuid ::
php - 生成 XML
我制作了一个脚本，它可以根据 Mysql 数据库中的一些表生成 XML。该脚本在 PHP 中运行。 public function getRawMaterials($apiKey, $format
openssl - 生成、签署和验证数字签名
所以这是我的项目中的一个问题。 In this task, we will use OpenSSL to generate digital signatures. Please prepare a f
r - 生成/绘制对数正态生存函数
我在 SAS LIFEREG 中有一个加速故障时间模型，我想绘制它。因为 SAS 在绘图方面非常糟糕，我想实际重新生成 R 中曲线的数据并将它们绘制在那里。 SAS 提出了一个尺度(在指数分布固定为
Django key 生成
我正在为 Django 后端制作一个样板，并且我需要能够使它到达下一个下载它的人显然无法访问我的 secret key 的地方，或者拥有不同的 key 。我一直在研究一些选项，并在这个过程中进行了实验
iPhone Excel 生成
我正在创建一个生成采购订单的应用程序。我可以根据用户输入的详细信息创建文本文件。我想生成一个看起来比普通文本文件好得多的 Excel。有没有可以在我的应用程序中使用的开源库？最佳答案目前还没有任何
ScalaCheck 生成 BST
我正在尝试使用 ScalaCheck 为 BST 创建一个 Gen，但是当我调用 .sample 方法时，它给了我 java.lang.NullPointerException。我哪里错了？ seal
Javascript 测验结果计算/生成
已关闭。此问题需要 debugging details 。目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and the
verilog 生成 if/else
我尝试编写一些代码，例如(在verilog中): parameter N = 128; if (encoder_in[0] == 1) begin 23 binary_out = 1;
hibernate - Grails 生成
我正忙于在 Grails 项目中进行从 MySQL 到 Postgres 的相当复杂的数据迁移。我正在使用 GORM 在 PostGres 中生成模式，然后执行 MySQL -> mysqldump
XSLT 生成 UUID
如何使用纯 XSLT 生成 UUID？基本上是寻找一种使用 XSLT 创建独特序列的方法。该序列可以是任意长度。我正在使用 XSLT 2.0。最佳答案这是一个good example 。基本上，
ios - 生成.app文件并安装在设备上
我尝试安装.app文件，但是当我安装并单击“同步”(在iTunes中)时，我开始在设备上开始安装，然后停止，这是一个问题，我不知道在哪里，但我看到了我无法解决的奇怪的事情: 最佳答案似乎您没有在Xc
java - 生成 JavaDocs？
自从我生成 JavaDocs 以来已经有一段时间了，我确信这些选项在过去 10 年左右的时间里已经得到了改进。我能否得到一些有关生成器的建议，该生成器将输出类似于 .Net 文档结构的 JavaDo
.net - 生成 PDF
我想学习如何生成 PDF，我不想使用任何第三方工具，我想自己用代码创建它。到目前为止，我所看到的唯一示例是我通过在第 3 方 dll 上打开反射器查看的代码，以查看发生了什么。不幸的是，到目前为止我看
C# Excel 生成
我正在从 Epplus 库生成 excel 条形图。这是我成功生成的。我的 table 是这样的 Mumbai Delhi Financial D

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 从jquery中动态生成的下拉按钮获取值