javascript - ejemplos - El clic izquierdo no funciona en selectbox/textbox dinámico

menu responsive drop down

Question

De hecho, hice esta pregunta en otro hilo, pero no pude proporcionar el ejemplo del violín correctamente con el problema. Ahora logré crear el ejemplo del violín con el problema. Siga la secuencia donde arrastra y suelte la imagen en el panel lateral derecho -> haga doble clic en la imagen caída (aparecerá otra imagen donde no se incluyó correctamente el src, pero no importa) -> vuelva a hacer clic en el imagen -? entonces aparecerá el html dinámico. El problema es cuando intento hacer clic con el botón izquierdo en la casilla de selección, no aparecerá la lista de resultados. Pero cuando haces clic derecho sobre él y luego haces clic en él, entonces aparecerá. Por favor dime la causa. Lo intenté pero no pude encontrarlo.

Incluiré parte del código a continuación, pero el código completo estará allí en violín.

$(document).ready(function () {
var x = null;
//Make element draggable
$(".drag").draggable({
helper: ''clone'',
cursor: ''move'',
tolerance: ''fit'',
stop: function (ev, ui) {
var pos = $(ui.helper).offset();
var dragItem = $(this).attr(''id'');
objName = "#" + dragItem + count;
$(objName).removeClass("drag");
$(objName).draggable({
cancel: ".arrows"
});
//Fires when an existing object is dragged
$(objName).draggable({
containment: ''#droppable'',
drag: function (ev, ui) {
// instance.repaint($(this));
var x = ui.offset.left;
var y = ui.offset.top;
$("#xax").val(x);
$("#yax").val(y);
},
stop: function (ev, ui) {
var x = ui.offset.left;
var y = ui.offset.top;
jsonElements.forEach(function (element) {
if (element.cloneID == currDragId) {
element.left = x;
element.top = y;
//appendNewArrowPositions(x,y,currDragId);
}
});
}
});
},
revert: true
});
$("#droppable").droppable({
accept: ''.drag'',
activeClass: "drop-area",
drop: function (e, ui) {
if ($(ui.draggable)[0].id != "") {
count++;
var dragItem = $(ui.draggable)[0].id;
x = ui.helper.clone();
$(this).append(x.attr("id", dragItem + count));
ui.helper.remove();
var clone = ui.draggable;
var width = clone.width();
var height = clone.height();
var parent = $(''.droppable.ui-droppable'');
//substract the additional amount created by relativeness
var leftAd = (x.position().left - parent.offset().left);
x.css({
left: leftAd
});
var offsetXPos = ui.offset.left;
var offsetYPos = ui.offset.top;
var obj = {};
obj["cloneID"] = dragItem + count;
obj["width"] = 85;
obj["height"] = 85;
obj["top"] = offsetYPos;
obj["left"] = offsetXPos;
if (dragItem == "input") {
obj["streamAlies"] = "";
obj["selectedDefinedStream"];
obj["asignedAttributeList"];
obj["itemType"] = "input";
}
var str = eval(obj);
jsonElements.push(str);
//to append the delete button only to the clone
$(''img[id="arrow"]'').append($(x.find(''img[id="arrow"]'')).attr("id", ''cloneImage'' + count));
x.resizable({
maxHeight: $(''#droppable'').height(),
maxWidth: $(''#droppable'').width()
});
x.addClass(''remove'');
var el = $(''<span><a href="Javascript:void(0)" class=/"xicon delete'' + count + ''/" id=/"delete'' + count + ''/" title=/"Remove/">X</a></span>'');
$(el).insertAfter($(''img[id="cloneImage'' + count + ''"]''));
$("#" + dragItem + count).dblclick(function (event) {
event.stopPropagation();
var cloneAttrID = $(this).attr(''id'');
var config = $(''<span id=/"configconfigImg'' + count + ''/" class=/"config/"> <img id=/"configImg'' + count + ''/" class=/"configs configClone'' + cloneAttrID + ''/" src=/"images/configSymbol.png/"></span>'');
$("#" + cloneAttrID).append(config);
$(''.configClone'' + cloneAttrID).on(''click'', function (event) {
event.stopPropagation();
var attrId = $(this).attr(''id'');
var parentCloneId = $(this).parent().parent().attr("id");
if ($(this).hasClass("selected" + attrId)) {
$(".pop" + attrId).slideFadeToggle(function () {
$("#" + attrId).removeClass("selected" + attrId);
$("#config" + attrId).children(".pop" + attrId).remove();
});
} else {
if (dragItem == "input") {
var selectOptions = "";
for (var z = 0; z < definedStreams.length; z++) {
selectOptions += ''<option value="'' + definedStreams[z].streamName + ''">'' + definedStreams[z].streamName + ''</option>'';
}
jsonElements.forEach(function (element) {
if (element.itemType == "Output") {
selectOptions += ''<option value="'' + element.streamAlies + ''">'' + element.streamAlies + ''</option>'';
}
});
$(this).addClass("selected" + attrId).parent().append(''<div id="pop'' + attrId + ''" class="messagepop pop'' + attrId + ''"><form id="new_message" action="/messages"><p><label for="definedStream">Please select the stream</label>'' +
''<select name="selectedStreamsId'' + attrId + ''" id="selectedStreamsId'' + attrId + ''"><option value="-1">--SELECT--</option>'' + selectOptions +
''</select></p>'' +
''<p></p><input type="button" value="Save" name="saveStream'' + attrId + ''" id="saveStream'' + attrId + ''"/></div></form>'');
// Stopping propagation of specfic element
//$(".pop"+attrId).add(''#selectedStreamsId''+attrId+'''').click(handler);
}
}
});
});
x.appendTo(''#droppable'');
};
}
});
}); 

violín Enlace: http://jsfiddle.net/q2qCY/7/