Left click does not work on dynamic selectbox/textbox

问题

i actually asked this question in another thread but i could not provide the fiddle example properly with the problem. Now i managed to create the fiddle example with the problem. Please follow the sequence where drag and drop the image to right side pane -> double click on the dropped image (then another image will appear where i did not included the src properly. but it does not matter) -> again click on the appeared image -? then the dynamic html will appear. Problem is when i try to left click on the selectbox it will not show the list of results. But when you right click on it and then left click on it, then it will appear. Please tell me the cause of it. I tried but i could not find it.

I will include part of code below but the full code will be there on fiddle.

$(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');
            };
        }
    });
});   

fiddle Link : http://jsfiddle.net/q2qCY/7/

来源：https://stackoverflow.com/questions/23987853/left-click-does-not-work-on-dynamic-selectbox-textbox