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

时间：2018-05-23 05:48:51

标签： javascript jquery

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

有一个名为Choose the Item,的按钮，当点击它时，它会给出一个下拉列表，显示值，用户选择一个值，按钮名称会更改为所选的值。

在此示例中，由于缺少引导库，因此外观并不相同。

我遇到的问题是，click事件不会对第二个生成的动态内容起作用。那是我在添加其他内容时无法点击按钮Choose the Item。有人可以帮帮我吗？

＆＃13;
＆＃13; 
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);

});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

  

有一个名为Choose User的按钮，当点击它时，它会给出一个下拉列表，显示值，用户选择一个值，按钮名称会更改为所选的值。

添加此部分代码

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

点击事件不会对第二个生成的动态内容起作用。那，当我添加另一个类别时，我无法单击“选择用户”按钮。

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

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

我认为这有助于你

＆＃13;
＆＃13; 
$(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);
});
＆＃13; 
.hidden {
  display: none
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

<强>更新

1 - 添加此项以更新dom 

componentHandler.upgradeDom();

2 - 为按钮文字添加此内容

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

3 - 使用${count}代替您使用动态ID动态。

＆＃13;
＆＃13; 
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();

});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

<!DOCTYPE html>
<html>
<head>
<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>
<script>
$(document).ready(function(){
$(document.body).on('click', 'li.mdl-menu__item', function () {
    var selectedID = $(this).closest('ul');
    var countID = $(selectedID).attr("for");
    var cnt = $(selectedID).attr("for").replace("volume-menu","");
    $("#volume-menu"+ cnt).html($(this).text());
 });
var count = 1;
$('.js-add').click(function() {
    count++;
     var content = `        

                <div class="form-control-group">
            <h3>Transport No. `+count+`</h3>

            <div class="form-control">
                <label for="volume">Volume</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 volume
                </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>
<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>Transport No. 1</h3>
        <div class="form-control">
            <label for="volume">Volume</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 volume
            </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>
</html>
相关问题
最新问题