I use http://silviomoreto.imtqy.com/bootstrap-select/ to make stylized selects.

.repeat select.selectpicker.color.col-xs-3 data-width="fit" action=text1 option data-content="<div class='colorpreview' style='background-color:red' ></div>" 1 option data-content="<div class='colorpreview' style='background-color:blue'></div>" 2

I process the data from select through

 $('.color').on('changed.bs.select', function (e) { ... action = $(this).attr('action'); console.log(action); });

Then I wrote a copy of the last select:

 $('.addText').click(function() { var count = $('.color').length; var next = count + 1; $('.color[action=text'+ count +']').clone(true).attr('action', 'text'+ next).appendTo('.repeat'); });

As a result, the element is copied, but when the value in the copied element changes, the parent's event is processed. This is detected by outputting the action attribute to the console (the action changes textN with each new element, where N = N + 1)

How to make the copied elements independent and self-sufficient?

  • Make an example that you can run, here in the snippet, or on any of the services like jsfiddle. The code looks working - Grundy
  • jsfiddle.net/#&togetherjs=lGO5bpAzHb - Kula Hula
  • vooot :-) now everything is clear. If you look at the resulting markup, you will also see what's wrong - Grundy
  • Yes, I saw, thanks. But the problem did not disappear if you made a wrapper for the selecta div for copying ... although the markup no longer contains erroneous actions - Kula Hula
  • UPD: jsfiddle.net/qvhgk33x/1/#&togetherjs=lGO5bpAzHb - Kula Hula

1 answer 1

The logic in the handler was not entirely correct.

This plugin hides the main select by wrapping it in its markup and transferring its attributes to the div. It turned out. that immediately after loading the color class was at the select and its container, while both of them are the last children at their levels, so both were chosen.

Instead, you should take the last select, for example, the selectpicker class, and initialize the plugin directly on it.

However, since the select is now copied without events, the event handler should be delegated using the on method.

In the end, everything might look like this:

 $('.addText').click(function() { var count = $('.selectpicker').length; var next = count + 1; var picker = $('.selectpicker').eq(-1).clone().attr('action', 'text' + next).appendTo('.repeat'); picker.selectpicker(picker.data()); }); $('.repeat').on('changed.bs.select', '.selectpicker', function(e) { action = $(this).attr('action'); console.log(action); }); 
 select { clear: both; display: block; } .colorpreview { background: #bbb; border: 1px solid #bbb; height: 30px; width: 30px; border-radius: 5px; display: block; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/js/bootstrap-select.js"></script> <div class=repeat> <select class="selectpicker color col-xs-3" data-width="fit" action=text1> <option data-content="<div class='colorpreview' style='background-color:red' ></div>">1</option> <option data-content="<div class='colorpreview' style='background-color:blue'></div>">2</option> </select> </div> <button class=addText>Копировать последний select</button>

  • Thank! It works! - Kula Hula