Get values from drop down button generated dynamically in jquery

Question

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 = `        
   
                
            Content No. `+count+`

            
                Item

                

                
                    10
                    20
                    30
                

            
        
        
        
        
`
        
       $('.main').append(content);

});



  
  
  
  
  



Page Title




Add Content
 




        
            Content No. 1

            
                Item

                

                
                    10
                    20
                    30

Saeed · Accepted Answer

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.

Add this part of code

$(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.

This type of event definition solve this problem and you used it. Your code works well and I did not face this issue.

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

I think this helps you

$(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 =
    `
                Category ` +
    count +
    `

                
                    Type of User

                    

                    
                        User Specialist
                        User Moderator
                       
                    

                    
                
    `;

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

.hidden {
  display: none
}






  
    Category 1

    
      Type of User

      

      
        User Specialist
        User Moderator

Update

1- Add this for updating dom

componentHandler.upgradeDom();

2- Add this for button text

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

3- make id dynamic with ${count} instead of your usage.

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 = `        
                
            Content No. ${count}

            
                Item

                

                
                    10
                    20
                    30
                

            
        
        
        
        
`

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

});











Page Title




  
    Add Content
  

  

    
      Content No. 1

      
        Item

        

        
          10
          20
          30

Get values from drop down button generated dynamically in jquery

Answers (2)

Related Questions