Home » Javascript » Get values from drop down button generated dynamically in jquery

Get values from drop down button generated dynamically in jquery

Posted by: admin August 12, 2018 Leave a comment

Questions:

I am a simple category form that consists of a button Choose the Item that acts like a drop down component. Initially, the content form is a static html and when the user clicks on Add Content, another content form is added / duplicated dynamically.

There is a button called Choose the Item, 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.

Here in this example, the look and feel is not the same because of missing bootstrap libraries.

The issue that I am having that, the click event is not working on the second generated dynamically content. That, is I am unable to click the button Choose the Item when I add another content. Can someone please help me with this ?

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>
Answers: